本文详解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('已经拦截');
}总结
以上就是本文的全部内容，希望这些内容能对您的学习或工作有所帮助。如有任何疑问，欢迎留言交流。