子元素阻挡父元素事件执行大佬们有什么好的建议？

Question

问题描述
我的代码如下：
:class="mun==index?'active':''"
v-for="(item,index)initems"
:key="index"
@click="clickFun"
:data-mun="index"
:data-val="item.txt"
>
layout="responsive"
width="200"
height="200"
:src="item.url"
>
{{item.txt}}
exportdefault{
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触发没问题{{value}}methods:{clickFun(e){console.log(e.type)}},