事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。
注释:事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。
-
阻止事件冒泡的方式
- 标准写法:利用事件对象里面的 stopPropagation()方法 ( stop 停止 Propagation 传播)
e.stopPropagation()
- 非标准写法:IE 6-8 利用事件对象 cancelBubble 属性 (Bubble:水泡,cancelBubble :取消冒泡)
e.cancelBubble = true;
-
例子:
<div class="father">
<div class="son">son儿子</div>
</div>
<script>
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation();
window.event.cancelBubble = true;
}, false);
var father = document.querySelector('.father');
// 给father注册单击事件
father.addEventListener('click', function() {
alert('father'); // 在son中取消冒泡之后,这里就不会执行
}, false);
// 给document注册单击事件
document.addEventListener('click', function() {
alert('document');// 在son中取消冒泡之后,这里就不会执行
})
</script>
- 阻止事件冒泡的兼容性处理
if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}