vue中 $event获取当前添加事件的元素，却得到子元素

Question

如下，我需要获取添加了事件的那个dom节点，但是点击该元素后，却返回的是子元素节点，添加了 .stop 事件修饰符同样也是如此，这个是怎么回事呢？
源码：
html：

<div v-for="list in item.list" @touchstart.stop="touchEle($event,list)">
    <div>
        <i :class="[list.class,list.color]"></i><br />
        {{list.title}}
    </div>
</div>

js：

console.log(ev.target)

结果：
得到<i class="el-icon-setting brown"></i> 节点而非 div这个节点

Answer 1

因为是这个事件从i节点冒泡上来的。

你可以加个判断来保证。

if (ev.target === ev.currentTarget) {
    //从绑定目标触发
}

Answer 2

$event表示的是你点击的元素，不是你事件绑定的元素，事件触发默认是冒泡机制

Answer 3

.target会指向最近的一个（如果有z-index的话，是最大的一个），当前指向i，可以用.stop后，currentTarget就会指向你要的元素（当前所点击冒泡最外层）

Answer 4

做一下判断处理
const _this = ev.target === ev.currentTarget ? e.target : ev.currentTarget