在这之前,我们先了解一下
DOM的事件对象:
- preventDefault() 取消事件的默认行为
- stopPropagation() 取消事件冒泡对当前节点无影响
- cancelBubble() 取消事件冒泡
DOM事件处理有三个阶段:
- 捕捉阶段(capture phase):从最上层元素,直到最下层(你点击的那个target)元素。路过的所有节点都可以捕捉到该事件。
- 命中阶段(target phase):如果该事件成功到达了target元素,它会进行事件处理。
- 冒泡阶段(bubbling phase):事件从最下层向上传递,依次触发父元素的该事件处理函数。
在任意一个阶段的事件处理函数中,都可以通过调用event.prepagation()来中断事件流,后续的阶段将不会被调用。
回归正题。我们可以在触发子元素的事件中,事件处理完成后,加一个return false,即可阻止父元素事件的触发。这里我举个,代码如下:
HTML代码:
<div class='parent'>
<div class='child'></div>
</div>
JS代码:
$('.child').bind('click',function(){
console.log('child');
return false;
});
$('.parent').bind('click',function(){
console.log('parent');
return false;
});
return false做了三件事:
- stopPropagation()阻止事件传播
- preventDefault()禁止浏览器默认行为
- 立即结束当前函数并且返回