深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)

只关注括号内问题的同学，可直接跳转到蓝字部分。（标题起的有点大，其实只讨论一个问题）

两个在React组件上绑定的事件，产生冲突后，使用e.stopPropagation()，阻止冒泡，即可防止事件冲突，毫无问题。

今天是踩了个React事件的坑，需求可以简化为：点击框体以外的部分则隐藏框体。最直接的想法，document上绑定个事件，设置控制显示隐藏的state为false，在框体上绑定个事件，阻止冒泡。这样点击框体内部就不会触发document上的事件。

等写完了，发现一个问题，无法阻止冒泡，一搜索，好家伙，好多人问e.stopPropagation()为什么无法阻止事件冒泡，但是鲜有靠谱的回答。我第一个想法是原生事件和React事件产生冲突。明显绑定原生事件是不符合React精神的，但我决定在探索真理的路上走下去了。

为了直观的调试，把需求转化为，点击框体内 alert（1）点击框体外 alert（2）。

在document上绑定 alert（2），框体上（框体为React组件，下同）绑定 alert（1），不做特殊处理，点击框体内，根据事件冒泡，先弹 1 再弹 2 。这一点符合预期。此时e.stopPropagation()无法阻止冒泡。

经过 Stack Overflow 解惑 e.nativeEvent.stopImmediatePropagation() 可以完美实现预期。

下面进入探索环节，经查阅资料，得出以下结论：

React为了提高效率，把事件都委托给了document，所以 e.stopPropagation() 并非是不能阻止冒泡，而是等他阻止冒泡的时侯，事件已经传递给document了，没东西可阻止了。可以通过在document.body上绑定 alert（3），直观的了解这一点，3 是优先于 1 弹出的。
e.stopPropagation()不行，浏览器支持一个好东西，e.stopImmediatePropagation() 他不光阻止冒泡，还能阻止在当前事件触发元素上，触发其它事件。这样即使你都绑定到document上也阻止不了我了吧。
这样做还不行，React对原生事件封装，提供了很多好东西，但也省略了某些特性。e.stopImmediatePropagation() 就是被省略的部分，然而，他给了开口：e.nativeEvent ，从原生的事件对象里找到stopImmediatePropagation()，完活。

测试代码如下：

class Test extends React.Component{componentDidMount(){document.οnclick=this.two;}one(e){e.nativeEvent.stopImmediatePropagation();alert(1)}two(){alert(2)}render(){return(<div style={{height:150,width:150,backgroundColor:"#000"}} onClick={this.one}/>)}
}ReactDOM.render(<Test/>,document.getElementById("test")
);

感谢且不仅限于：

转载于:https://www.cnblogs.com/libin-1/p/6298326.html

深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)相关推荐

jquery/js 点击空白区域隐藏某一个层/元素
场景:点击一个按钮弹出一个对话框/气泡,点击空白区域隐藏对话框/气泡: html: <button id="btn">按钮</button> <div ...
bootstrap弹出框如何实现点击出弹出框后，再点击任意地方隐藏弹出框
最近做个项目是用bootstrap搭建的网站,因为其自带弹出框很好使,便直接拿过来用了. 不废话直接进入正题共分两步 1. 首先设弹出框方式为自动 popover(function(){trigge ...
jQuery 怎么实现点击页面其他地方隐藏菜单？做了个按钮点击时弹出菜单，想实现点击其他地方时隐藏弹出的菜单
<p><a href="javascript:void(0)" class="a">菜单按钮</a></p> & ...
jquery实现div的隐藏和显示和点击空白显示隐藏
$('#button')是要点击的按钮,$('#view')是要显示或隐藏的内容区域一.点击按钮显示隐藏 $(function () { $("#button").click(f ...
处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
react取消捕获_React中阻止事件冒泡的问题详析
前言最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧在正式开始 ...
JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
React 在body上绑定事件以及阻止事件冒泡
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
利用React/anu编写一个弹出层
本文将一步步介绍如何使用React或anu创建一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...

深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)

深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)相关推荐

最新文章

热门文章