JavaScript中中断事件传播与阻止默认行为的实现方法
本文详解JavaScript中事件传播机制,重点介绍如何中断事件冒泡及阻止默认行为。对比W3C标准(stopPropagation、preventDefault)与IE旧版兼容写法(cancleBubble、returnValue),并通过代码示例演示事件捕获与冒泡模式下的传播控制及效果取消。
事件传播机制概述
事件传播
Microsoft的设计逻辑是,当某个元素触发事件时,该事件会依次在其父节点上触发,并沿DOM树结构向上传递,直至到达顶层的document对象。这种自下而上的传递机制被称为“事件冒泡”,即通常所说的事件传播过程。
中断事件传播的方法
如何中断事件的传播?
在W3C标准中,可以通过调用stopPropagation()方法来取消冒泡行为。
对于IE浏览器,可通过设置cancleBubble = true属性为true来取消冒泡。
取消事件默认行为
取消事件默认效果:
在IE环境下,可通过设置returnValue = false为false来取消事件默认效果。
在遵循W3C标准的浏览器中,应使用defaultPrevent()方法来取消事件默认效果。
<div id='aa'>
<div id='bb'>
<div id ='cc'></div>
</div>
</div>
#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 停止传播
}
取消事件效果
在IE浏览器中,可通过设置returnValue = false为false来实现取消事件效果。
在W3C标准浏览器中,应调用preventDefault()方法来实现取消事件效果。
document.getElementsByTagName('a')[0].onclick = function (ev){
alert('点击');
//达到事件结束的效果 但是函数还是往下运行
//
ev.preventDefault();
alert('已经拦截');
}
总结
以上就是本文的全部内容,希望这些内容能对您的学习或工作有所帮助。如有任何疑问,欢迎留言交流。
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
