子元素阻挡父元素事件执行

Question

问题描述

我的代码如下：

<dl
    :class="mun == index ? 'active' : ''"
    v-for="(item, index) in items"
    :key="index"
    @click="clickFun"
    :data-mun="index"
    :data-val="item.txt"
>
    <dd>
        <mip-img
            layout="responsive"
            width="200"
            height="200"
            :src="item.url"
        ></mip-img>
    </dd>
    <dt>{{ item.txt }}</dt>
</dl>

export default {
    data () {
        return {
            mun: 0,
            items: [{
                url: 'https://imagelib.cdn.bcebos.com/cip_ml_pic9e30fce5-459f-4191-841b-cf6906d7d01c.jpeg',
                txt: '新房装修'
          }, {
                url: 'https://imagelib.cdn.bcebos.com/cip_ml_pic2ed62b5f-2073-4b15-b1a1-281e396529ac.jpeg',
                txt: '旧房翻新'
            }]
        };
    }
    methods: {
        clickFun (e) {
            this.mun = e.target.dataset.mun;
        }
    }
};

我的事件加在父级层，也就是dl上，页面渲染后，发现当点击图片以及文字的时候，无法触发clickFun事件，请问是为什么呢？

Answer 1

要获取data数据就要确保点击的元素就是该data绑定的元素，不然就获取不到target，可以利用添加参数的方式将值传递给事件解决我的问题

Answer 2

1.查一下你的mip-img组件是否阻止了事件冒泡
2.打印一下e，简写了一个demo触发没问题

<dl @click="clickFun">
    <dd>
        <img src="10.png" />
    </dd>
    <dt>{{ value }}</dt>
</dl>

methods: {
    clickFun(e) {
        console.log(e.type)
    }
},

Answer 3

你怎么知道事件被阻止了呢？ 没达到预定的功能逻辑吗？
dataset 是什么鬼？ 这不是小程序里面才有的吗？ 即使这是小程序里面， e.target.dataset ，你也取不到任何职，因为点击的是子元素。

Answer 4

你理解错了...并不是没有触发clickFun, 而是你点图片或者文字的时候e.target又不是你的dl, 自然上面也不存在mun去让你赋值...