javascript - 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

解决方案

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

这篇关于javascript - React 父级写的click事件,怎么不让子级触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！