vue的点击事件问题

Question

html:

<ul id="optionList">
        <li class="listItem vux-1px-b" id="myWallet" @:click="itemClk">
            <p class="icon"><img src="@/assets/images/icon/icon9.png"></p>
            <p class="text">我的钱包</p>
            <p class="arrow"><img src="@/assets/images/icon/r_arrow.png"></p>
        </li>
        <li class="listItem vux-1px-b" id="order" @click="itemClk">
            <p class="icon"><img src="@/assets/images/icon/icon1.png"></p>
            <p class="text">我的订单</p>
            <p class="arrow"><img src="@/assets/images/icon/r_arrow.png"></p>
        </li>
        <li class="listItem vux-1px-b" id="cooperation" @click="itemClk">
            <p class="icon"><img src="@/assets/images/icon/icon8.png"></p>
            <p class="text">我要合作</p>
            <p class="arrow"><img src="@/assets/images/icon/r_arrow.png"></p>
        </li>
    </ul>

js:

methods: {
    itemClk (e) {
        let thisId = e.target.id
        this.$router.push(thisId)
    }
},

效果图：

需求：
点击li标签的时候获取li标签的id进行路由跳转

问题：
当点击li空白区域的时候可以正确获取到li的id

但是当点击文字或者icon的时候

获取的却是li的子标签

这样就不能直接获取到li的id了，所以想请问一下各位，怎样在给li绑定点击事件的时候，点击li始终获取li元素，不用获取它的子元素
(试了下@click.stop没有用...)

Answer 1

event.currentTarget获取到的是click事件绑定的DOM对象，event.target获取到的为当前所点击的DOM对象

Answer 2

写一个methods的方法，然后v-for出标签获取列表内容，再for时候绑定事件给methods方法传入指定参数，那么点哪里传入的参数都一样的了，然后根据传入的参数进行路由跳转

Answer 3

直接把id当参数传进itemClk函数就可以呀

Answer 4

建议data中定一个菜单的list，然后v-for循环出来：

<template>
    <ul id="optionList">
        <li v-for="(item,index) in optionList" class="listItem vux-1px-b" :id="item.id" @click="itemClk(item)">
            <p class="icon"><img :src="item.icon"></p>
            <p class="text">{{ item.text}}</p>
            <p class="arrow"><img src="@/assets/images/icon/r_arrow.png"></p>
        </li>
    </ul>
</template>
<script>
export default {
    data(){
        return {
            optionList: [
                {
                    id: 'myWallet',
                    text: '我的钱包',
                    url: '',
                    icon: require('@/assets/images/icon/icon9.png')
                },
                {
                    id: 'order',
                    text: '我的订单',
                    url: '',
                    icon: require('@/assets/images/icon/icon1.png')
                },
                {
                    id: 'cooperation',
                    text: '我要合作',
                    url: '',
                    icon: require('@/assets/images/icon/icon8.png')
                }
            ]
        }
    },
    methods: {
        itemClk(item){
            console.log(item)//单个菜单的所有信息
            this.$route.push(item.url)
        }
    }
}
</script>

Answer 5

有个比较笨的方法
e.tagName 判断一下。如果是图片或文字就用e.target.parentNode

Answer 6

Answer 7

这样，就?了

Answer 8

@click='itemClk(item.id)'
//
itemClk (id) {

    let thisId = id
    this.$router.push(thisId)
}