为了账号安全,请及时绑定邮箱和手机立即绑定

React 如何阻止事件冒泡?

React 如何阻止事件冒泡?

动漫人物 2018-08-02 17:10:20
在react组件中一个元素绑定onClick事件,点击后总会向上传播,如何阻止冒泡?有什么解决方案
查看完整描述

2 回答

?
一只萌萌小番薯

TA贡献1795条经验 获得超7个赞

阻止冒泡和默认事件和原生js一样的,不知道你的具体是什么情况:

e.stopPropagation();


查看完整回答
反对 回复 2018-08-29
?
犯罪嫌疑人X

TA贡献2080条经验 获得超4个赞

React 为提高性能,有自己的一套事件处理机制,相当于将事件代理到全局进行处理,也就是说监听函数并未绑定到DOM元素上。因此,如果你禁止react事件冒泡e.stopPropagation(),你就无法阻止原生事件冒泡;你禁用原生事件冒泡e.nativeEvent.stopPropagation(),React的监听函数就调用不到了。

正确的姿势,应该是判断event.target对象,是否是目标对象、或包含的对象、或被包含的对象,来决定是否触发事件。以下函数就可以用来判断包含性:

function contains(root, n) {

    var node = n;

    while (node) {

        if (node === root) {

            return true;

        }

        node = node.parentNode;

    }

    return false;

}

demo

handleClick (e) {

    if(e.target.nodeName === 'li'){

        // do something

    }

    if(contains(this.root, e.target)){

        // do something

    }

}


查看完整回答
反对 回复 2018-08-29
  • 2 回答
  • 0 关注
  • 792 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信