jQuery 中阻止事件冒泡方法和区别

Question

在一个对象上触发某类事件（比如单击 onclick 事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回 true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 document 对象（有些浏览器是 window）。

阻止事件冒泡

JQuery 提供了两种方式来阻止事件冒泡。

event.stopPropagation()

$("#div1").mousedown(function(event){
    event.stopPropagation();
});

return false

$("#div1").mousedown(function(event){
    return false;
});

但是这两种方式是有区别的：

• return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。
• event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

event.preventDefault()

阻止默认的行为，而不阻止绑定 JavaScript事件

1. 如果把它放在头部 A 标签的 click 事件中，点击链接。
2. 会依次弹出：我是最里层 -> 我是中间层 -> 我是最外层，但最后却没有跳转页面
3. 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）