vue点击事件触发源如何正确获取？

Question

按照官方给出的案例，点击事件触发源是在事件函数里边通过$event传递，实际操作中如下边，打印出来的对象很有可能是li span i 或者是p，我只想在获取到当前点击的li，如何获取？别说用jquery通过$index绑定到父级获取到当前那个li，实际数据中有可能层级很深你根本不知道有多少层，用vue的写法如何获取到当前点击那个li？

<div id="app">
            <ul>
                <li v-for="item in items" @click="clickFn($event,$index)">
                    <span>你可能点到我</span>
                    <i>也有可能点到我</i>
                    <p>更有可能会点到我</p>
                </li>
            </ul>
</div>

js代码:

new Vue({
                el:'#app',
                methods:{
                    clickFn:function(event){
                        console.info(event.target)
                    }
                }
})

Answer 1

语法写成这样：@click.self=“callback()”,试试吧。

Answer 2

寫了個簡單的例子：

jsFiddle

因為每個可點擊的 li 都利用 .stop 阻止往上冒泡，所以變成只會觸發當下的 li 點擊事件

Answer 3

v-for="(item,index) in imtes" @click="clickFn(index)"

v-for第二个参数是索引。

Answer 4

使用楼上的方式

<div id="app">
    <ul>
        <li v-for="(item, index) in items" @click="clickFn($event, index)">
            <span :style="{color: item.color}">{{ item.text }}</span>
            <strong>world</strong>
            <em>123</em>
        </li>
    </ul>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        items: [
            {text: 'red', color: 'red'},
            {text: 'green', color: 'green'},
            {text: 'blue', color: 'blue'},
        ]
    },
    methods: {
        clickFn: function(event, index) {
            alert($('#app ul li').eq(index).text());
        }
    }
});
</script>

Answer 5

event.currentTarget 绑定事件的元素