React 事件代理与 stopImmediatePropagation about blog

[Lx15]

@youngwind 作者你好，我又认真的读了你的文章，做了测试，发现是有问题的：

1. 其实原生事件的执行时间总是先于合成事件，无论合成事件是不是在捕获阶段绑定
2. 所以上述用例的执行结果： 直接绑定在Child上的事件-》直接绑定在document上的事件-》点击子元素-》点击父元素
3. 所以你上面图的描述其实是错误的
4. 结果是对的，但是 e.nativeEvent.stopImmediatePropagation()其实只能在document 上才有用，换成
   document.getElementById('parent')都是不可以的

[LiuYashion]

谢谢作者~

[acrens]

结论：
1、e.stopPropagation 可以用来禁用 React 模拟事件；
2、e.nativeEvent.stopImmediatePropagation 只能用来禁用直接绑定在 document 上的事件；
3、对 2 的补充，试想一下，child 元素通过 React 直接绑定事件会被模拟到 document 上，parent 元素通过原生 addEventListener 绑定，通过冒泡原来应该 parent 先被触发，所以无法在 child 元素内禁用 parent 元素绑定的事件（当然，实际开发中，应该不会去 child 通过 React 绑定事件，而 parent 却不使用 React 绑定事件）。

[0x457]

谢谢作者~

[cloudsere]

写的太好了！！

[Lx15]

作者你好，很感谢你的文章，解开了我的疑惑，但是如果是下面的这种情景该怎样解决呢？

我想在点击子元素时，只是点击子元素，而不点击父元素，该怎样阻止呢？

[youngwind]

这种情况，除非你全部使用 React 绑定或者原生绑定，否则我想不到可阻止的方法。 @Lx15

[Lx15]

@youngwind 或者 在父元素上用target判断一下，可行不优雅

[youngwind]

哈哈哈，角度刁钻，但也确实可行。 @Lx15

[amnsss]

大赞！！！

[vincentdd]

感谢作者，同类分析里写的简单易懂的一个

[Nick930826]

写得不错

[someOneJYB]

测试发现document原生绑定事件在合成的事件执行之后执行，原生事件（document元素事件）-》点击子元素-》点击父元素-》直接绑定在document上的事件。链接地址
https://codesandbox.io/s/q33v4vw866

[someOneJYB]

补充一下在react页面里面打印了一下绑定在document上的click事件，发现第一个就是react绑定的事件，然后才是我在Didmount上绑定的事件

[yes1am]

@youngwind 作者你好，我又认真的读了你的文章，做了测试，发现是有问题的：

1. 其实原生事件的执行时间总是先于合成事件，无论合成事件是不是在捕获阶段绑定
2. 所以上述用例的执行结果： 直接绑定在Child上的事件-》直接绑定在document上的事件-》点击子元素-》点击父元素
3. 所以你上面图的描述其实是错误的
4. 结果是对的，但是 e.nativeEvent.stopImmediatePropagation()其实只能在document 上才有用，换成
   document.getElementById('parent')都是不可以的

@Lx15

根据我的测试结果，和你的结论有点出入，一起讨论下:

1. 原生事件执行总是先于合成事件？

你说的这种情况只在给 非document,window元素 ` 添加原生事件时成立，当给document添加原生事件时，还取决于添加原生事件的时机:

在render之前添加原生事件，那么原生事件先于合成事件绑定，触发时先执行原生事件。
在render之后比如didMount 中,那么合成事件先于原生事件绑定,触发时先执行合成事件。

2. 作者的结论是对的。

因为在作者在 didMount 中添加的事件,先执行原生的直接绑定在Child事件，然后根据在 didMount 中添加事件，所以合成事件先于原生事件执行，执行 点击子元素, 阻止冒泡所以 点击父元素不执行。最后会执行原生添加的 直接绑定在Document事件。

3. e.nativeEvent.stopImmediatePropagation()其实只能在document 上才有用？

我测试的结果是，这个api对其它元素也有效。可能我理解错你的意思了？

[wujiedong]

作者你好，很感谢你的文章，解开了我的疑惑，但是如果是下面的这种情景该怎样解决呢？

我想在点击子元素时，只是点击子元素，而不点击父元素，该怎样阻止呢？

parent的那个事件使用react中的合成事件,不要写原生事件,然后再子dom的事件中直接e.stopPropagation(),这样事件就不会冒泡到父那边
我试过子是合成事件,父是原生事件,这种方式我没有成功阻止冒泡

[sanfengliao]

React有自己的事件机制，React中的合成事件是通过事件委托委托给document元素，React会在document元素上绑定一个事件函数，React中所有的事件绑定都通过事件委托委托在document元素上，所以当React的合成事件触发时，其实会调用document绑定的事件函数，所以当在子元素的合成事件中调用e.stopPropagation()时是没办法组织原生事件的。再者，React中合成事件的e.stopPropagation()是自己定义的一个函数，和原生事件的stopPropagation没有任何联系，所以自然无法阻止原生事件的冒泡。 刚刚说了，React所有的事件都是委托在document元素上的，所以仔细看一下输出，会发现parent的原生事件回调函数比react合成事件的回调函数先执行

…

------------------ 原始邮件 ------------------ 发件人: "wujiedong"<[email protected]>; 发送时间: 2019年6月19日(星期三) 下午3:03 收件人: "youngwind/blog"<[email protected]>; 抄送: "Subscribed"<[email protected]>; 主题: Re: [youngwind/blog] React 事件代理与 stopImmediatePropagation (#107) 作者你好，很感谢你的文章，解开了我的疑惑，但是如果是下面的这种情景该怎样解决呢？ 我想在点击子元素时，只是点击子元素，而不点击父元素，该怎样阻止呢？ parent的那个事件使用react中的合成事件,不要写原生事件,然后再子dom的事件中直接e.stopPropagation(),这样事件就不会冒泡到父那边 我试过子是合成事件,父是原生事件,这种方式我没有成功阻止冒泡 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[jachan-lr]

非常非常非常有用，感谢！！！

[BigKongfuPanda]

写的很清楚。但是有个地方有问题：
function dispatchEvent(event) { let target = event.target; target.click && target.click(); // 触发点击元素的事件 while (target.parentNode) { // 沿 DOM 向上回溯，遍历父节点，触发其 click 事件 target.parentNode.click && target.parentNode.click(); target = target.parentNode; } }
节点上并没有绑定事件，不存在click函数。具体好像是react会在每个节点上生成一个唯一的id，把id与click事件的函数作为map的数据结构的形式存在一个全局对象中。调用 dispatchEvent的时候，会找到当前节点的id找到click函数。

[yang1666204]

太赞了！！！