JavaScript之事件的中断传播与行为阻止
- 如何中断事件的传播？
stopPropagation()w3c取消冒泡cancleBubble = trueIE取消冒泡
-
取消事件默认效果：
returnValue = falseIE取消事件效果defaultPrevent()w3c取消事件效果
<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);
