vue的点击事件问题

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)
    }
},

效果图:

clipboard.png

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

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

clipboard.png

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

clipboard.png

获取的却是li的子标签

clipboard.png

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

回答:

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

回答:

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

回答:

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

回答:

建议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>

回答:

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

回答:

clipboard.png

回答:

这样,就?了clipboard.png

回答:

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注