美文网首页
2018-12-08-🦕🦕React阻止事件冒泡?

2018-12-08-🦕🦕React阻止事件冒泡?

作者: 沐深 | 来源:发表于2018-12-08 14:31 被阅读0次

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

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

DEMO

function contains(root, n) {
    var node = n;
    while (node) {
        if (node === root) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}
handleClick (e) {
    if(e.target.nodeName === 'li'){
        // do something
    }
    if(contains(this.root, e.target)){
        // do something
    }
}

相关文章

  • 2018-12-08-🦕🦕React阻止事件冒泡?

    React 为提高性能,有自己的一套事件处理机制,相当于将事件代理到全局进行处理,也就是说监听函数并未绑定到DOM...

  • react阻止冒泡事件

    文章引用来自: http://www.jianshu.com/p/e0894bd588f4。 1、合成事件 在js...

  • react 阻止事件冒泡

    需求分析: div中嵌套button:点击“报名”按钮,随之子元素和父元素的事件都被触发。js中称之为冒泡...

  • 微信小程序中bind和catch的区别

    bindtap 冒泡事件,事件绑定不会阻止冒泡事件向上冒泡catchtap 非冒泡事件, 事件绑定阻止冒泡事件...

  • wepy基础知识

    1、bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。https://deve...

  • stopPropagation和stopImmediatePro

    都可以阻止事件冒泡(子元素向父元素冒泡) stopImmediatePropagation阻止事件冒泡并且阻止相同...

  • js 元素事件行为

    阻止默认事件: 事件委托: 阻止事件冒泡:

  • 合成事件vs原生事件

    场景:由于需求的原因,在React中混用了原生事件,发现e.stopPropagation();阻止事件冒泡无效。...

  • JS调试代码方向

    事件冒泡 - 阻止冒泡

  • React-阻止事件冒泡

    react中分为合成事件、原生事件 合成事件:在jsx中直接绑定的事件,如 原生事件:通过js原生代码绑定的事件,...

网友评论

      本文标题:2018-12-08-🦕🦕React阻止事件冒泡?

      本文链接:https://www.haomeiwen.com/subject/emjqhqtx.html