重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍JavaScript如何实现事件的中断传播和行为阻止方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联建站服务项目包括尼玛网站建设、尼玛网站制作、尼玛网页制作以及尼玛网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,尼玛网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到尼玛省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
事件传播
MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素。这种自底向上的事件传播方式称为“事件冒泡”,也就是事件传播。
如何中断事件的传播?
stopPropagation()
w3c取消冒泡
cancleBubble = true
IE取消冒泡
取消事件默认效果:
returnValue = false
IE 取消事件效果
defaultPrevent()
w3c取消事件效果
#aa{ width: 600px; height: 600px; background: gray; } #bb{ width: 400px; height: 400px; background: green; } #cc{ width: 200px; height: 200px; background: red; }
捕捉写法停止传播 从最顶层开始往下
document.getElementById('aa').addEventListener('click',function (ev){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);
冒泡写法停止传播 从下往上
document.getElementById('aa').addEventListener('click',function (){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 停止传播 }
取消事件效果
returnValue = false
//IE 取消事件效果
preventDefault()
//w3c取消事件效果
document.getElementsByTagName('a')[0].onclick = function (ev){ alert('点击'); //达到事件结束的效果 但是函数还是往下运行 // ev.preventDefault(); alert('已经拦截'); }
以上是“JavaScript如何实现事件的中断传播和行为阻止方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!