分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

JavaScript实现事件的中断传播和行为阻止方法示例

JavaScript   发布时间：2022-04-16  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript实现事件的中断传播和行为阻止方法示例，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_489_1@事件传播

@H_491_0@microSoft的设计是当事件在元素上触发时，该事件将接着在该节点的父节点触发，以此类推，事件一直沿着DOM树向上传播，直到到达顶层对象document元素。这种自底向上的事件传播方式称为“事件冒泡”，也就是事件传播。

@H_489_1@如何中断事件的传播？

stopPropagation() w3c取消冒泡

cancleBubble = true IE取消冒泡

@H_489_1@取消事件默认效果：

returnValue = false IE 取消事件效果

defaultPrevent() w3c取消事件效果

{ width: 600px; height: 600px; BACkground: gray; } #bb{ width: 400px; height: 400px; BACkground: green; } #cc{ width: 200px; height: 200px; BACkground: red; }

@H_489_1@捕捉写法停止传播 从最顶层开始往下

{alert('aa');ev.stopPropagation();},truE);// 结果捕捉到aa 加true 由冒泡变为捕捉 从上到下 document.getElementById('bb').addEventListener('click',function (){alert('bb')},truE); document.getElementById('cc').addEventListener('click',function (){alert('cc')},truE);

@H_489_1@冒泡写法停止传播 从下往上

{alert('aa');});//加true 由冒泡变为捕捉 从上到下 document.getElementById('bb').addEventListener('click',function (){alert('bb')}); document.getElementById('cc').addEventListener('click',function (ev){ alert('cc'); ev.stopPropagation(); // ev.cancleBubble = true;//IE下 取消冒泡方法 }); //结果是冒出cc 停止传播 }

@H_489_1@取消事件效果

returnValue = false //IE 取消事件效果

preventDefault() //w3c取消事件效果

[0].onclick = function (ev){ alert('点击'); //达到事件结束的效果 但是函数还是往下运行 // ev.preventDefault(); alert('已经拦截'); }

@H_489_1@总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

大佬总结

以上是大佬教程为你收集整理的JavaScript实现事件的中断传播和行为阻止方法示例全部内容，希望文章能够帮你解决JavaScript实现事件的中断传播和行为阻止方法示例所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：javascript中断事件传播阻止事件
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap