反应中阻止事件冒泡的问题详析

最近在研究,反应回来的等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于反应阻止事件冒泡的相关内容、下面话不多说了,来一起看看详细的介绍吧

在正式开始前,先来看看JS中事件的触发与事件处理器的执行。

<强>事件捕获与冒泡
　　

DOM事件会先后经历捕获与冒泡两个阶段。捕获即事件沿着DOM树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。

　　

IE9及之前的版本只支持冒泡

　　

　　

,,,,,,,,,,,,,,,,,|,一个
　　,- - - - - - - - - - - - - - - - - - | - - - | - - - - - - - - - - - - - - - - - -
　　,| Parent ,,,,,,,|,|,,,,,,,,,,,,,,,|
　　,|,- - - - - - - - - - - - - | - - - | - - - - - - - - - - -女人,,,,|
　　,|,| Children ,,V |,,,,,,,,,|,,,,|
　　,|,- - - - - - - - - - - - - - - - - - - - - - - - - - - - -,,,,|
　　|大敌;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,|
　　,- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
　　

　　 　　

<强>事件处理器
　　

　　

默认情况下,事件处理器是在事件的冒泡阶段执行,无论是直接设置元素的> 　　& lt; button>单击ME 　　& lt; script> 　　文档。addEventListener(“点击”,函数(事件){ 　　控制台。日志(点击“文档”); 　　}); 　　 　　函数btnClickHandler(事件){ 　　控制台。日志(“btn点击”); 　　} 　　& lt;/script> 　　 　　

输出: 　　

　　

btn点击
　　文档点击
　　

　　 　　

<>强阻止事件的冒泡
　　

　　

通过调用事件身上的<代码> stopPropagation() 可阻止事件冒泡,这样可实现只我们想要的元素处理该事件,而其他元素接收不到。

　　 　　 　　& lt; button>单击ME 　　& lt; script> 　　document.addEventListener ( 　　“点击”, 　　函数(事件){ 　　控制台。日志(点击“文档”); 　　}, 　　假 　　); 　　 　　函数btnClickHandler(事件){ 　　event.stopPropagation (); 　　控制台。日志(“btn点击”); 　　} 　　& lt;/script> 　　 　　

输出: 　　

　　

btn点击
　　

　　 　　

<强>一个阻止冒泡的应用场景
　　

　　

常见的弹窗组件中,点击弹窗区域之外关闭弹窗的功能,可通过阻止事件冒泡来方便地实现,而不用这种方式的话,会引入复杂的判断当前点击坐标是否在弹窗之外的复杂逻辑。

　　 　　 　　文档。addEventListener(“点击”,()=比;{//关闭对话框 　　}); 　　 　　dialogElement。addEventListener(“点击”,事件=比;{ 　　event.stopPropagation (); 　　}); 　　 　　

但如果你尝试在反应中实现上面的逻辑,一开始的尝试会让你怀疑人生。

　　

　　

　　

了解了JS中事件的基础,一切都没什么难的。在引入后反应,,事情开始起变化。将上面阻止冒泡的逻辑在反应里实现一下,代码大概像这样:

　　 　　 　　函数的应用(){ 　　useEffect(()=比;{ 　　文档。addEventListener(“点击”,documentClickHandler); 　　返回()=比;{ 　　文档。removeEventListener(“点击”,documentClickHandler); 　　}; 　　},[]); 　　 　　函数documentClickHandler () { 　　控制台。日志(点击“文档”); 　　} 　　 　　函数btnClickHandler(事件){ 　　event.stopPropagation (); 　　控制台。日志(“btn点击”); 　　} 　　 　　返回& lt;按钮> 　　进口的反应,{useEffect}从“反应”; 　　从“进口ReactDOM react-dom”; 　　 　　窗口。addEventListener(“点击”,事件=比;{ 　　console.log(“窗口”); 　　}); 　　 　　文档。addEventListener(“点击”,事件=比;{ 　　控制台。日志(“文档:bedore反应山”); 　　}); 　　 　　document.body。addEventListener(“点击”,事件=比;{ 　　console.log(“身体”); 　　}); 　　 　　函数的应用(){ 　　函数documentHandler () { 　　控制台。日志(“文档内反应”); 　　} 　　 　　useEffect(()=比;{ 　　文档。addEventListener(“点击”,documentHandler); 　　返回()=比;{ 　　文档。removeEventListener(“点击”,documentHandler); 　　}; 　　},[]); 　　 　　回报( 　　& lt; div> 　　document.body。addEventListener(“点击”,事件=比;{ 　　+ event.stopPropagation (); 　　console.log(“身体”); 　　});

反应中阻止事件冒泡的问题详析