【React】React 父级写的click事件,怎么不让子级触发

我是个新手,目前学React遇到问题了,求帮助

1.问题描述就是父级的点击事件被子级给拦截到了. 我的点击事件是加在父级身上的, 我只想获取父级DOM,并读取定义的自定义属性, 但是里面有一些子级元素, 点击到子级DOM元素,会获取子级的DOM,然而我不想获取子级DOM.

2.我现在需要给几个li 添加click事件,事件需要获取该li上自定义的属性, li里面有div 有span, 我点li可以正常触发获取到自定义属性, 然而 我点到li里面的 div或 span,也会触发点击事件,但是事件源是它本身 不是li, 所以就获取不到li上自定义属性.

3.我目前的解决方法是:
在点击事件函数里面,判断当前DOM 有没有自定义属性, 如果没有,就往父级找,如果父级没有再往父级找

4.代码

代码1

   handleClick (event){
if(!event.target.getAttribute('data-type')){
if(!event.target.parentNode.getAttribute('data-type')){
if(!event.target.parentNode.parentNode.getAttribute('data-type')){
} else{
console.log(event.target.parentNode.parentNode.getAttribute('data-type'),'没有的父父级');
}
}else{
console.log(event.target.parentNode.getAttribute('data-type'),'没有的父级');
}
}else{
console.log(event.target.getAttribute('data-type'))
}

}

代码2
【React】React 父级写的click事件,怎么不让子级触发

回答

你使用event.currentTarget获取到的就是你注册点击事件的元素

你想点击列表li，获得这个li上的某个数据，对吗？
那么，定义一个li列表数组dataList，数据结构我就不写了，你应该知道。

dataList.map(item => {
  <li onClick={ e => this.handleClick(e, item) }></li>
})

这时候，handleClick就有你想要的数据了，都在item里。

需要阻止冒泡就加一个e，刚才忘记加了，然后事件里阻止一下即可。

以上是 【React】React 父级写的click事件,怎么不让子级触发 的全部内容， 来源链接： utcz.com/a/77353.html

回到顶部