JavaScript 事件冒泡机制与阻止方法详解

事件冒泡机制原理

JavaScript 的事件冒泡机制是指，当某个元素绑定了特定事件（例如 click）并被触发后，若未主动阻止冒泡，该事件会向父级元素逐级传播，依次触发父级元素上绑定的同名事件处理函数。

以下示例展示了这一过程。

 
<html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
function ialertdouble(e) {
alert('innerdouble');
stopBubble(e);
} 
function ialertthree(e) {
alert('innerthree');
stopBubbleDouble(e);
} 
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
} 
function stopBubbleDouble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
evt.preventDefault();//阻止浏览器默认行为，这样链接就不会跳转
} 
$(function() {
//方法一
//$('#jquerytest').click(function(event) {
// alert('innerfour');
// event.stopPropagation();
// event.preventDefault();
//}); 
//方法二
$('#jquerytest').click(function() {
alert('innerfour');
return false;
}); 
}); 
</script>
<div onclick="alert('without');">without
<div onclick="alert('middle');">middle
<div onclick="alert('inner');">inner</div>
<div onclick="ialertdouble(event)">innerdouble</div>
<p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p>
<p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p>
</div>
</div>
</html>

事件冒泡示例演示

当点击 inner 元素时，会依次弹出 'inner'、'middle' 和 'without' 提示框。这种现象即为事件冒泡。

从直观角度看，最内层的区域位于父级节点内部，点击子级区域在逻辑上也等同于点击了父级区域，因此事件会沿着 DOM 树向上层传播。

在实际开发中，通常不希望发生事件冒泡，因为这会导致多个事件处理函数被意外触发，引发不必要的副作用。

原生JS阻止冒泡方法

接下来点击 innerdouble 元素，可以发现其事件并未向上冒泡。这是因为在调用方法 ialertdouble() 时，内部调用了 stopBubble() 函数。该函数通过判断浏览器类型来阻止冒泡：在 IE 浏览器中使用 cancelBubble()，而在 Firefox 等标准浏览器中使用 stopPropagation()。

如果是链接元素，上述方法虽然能阻止冒泡，但浏览器仍会执行默认的跳转行为。此时需要借助 preventDefault() 方法来阻止浏览器的默认动作，具体实现可参考 ialertthree() 函数。

jQuery中的阻止方法

目前主流开发多借助 jQuery 来绑定 click 事件，这使得代码编写更加简洁。

我们可以在点击事件处理函数中传入 event 参数，然后直接调用相关方法。

event.stopPropagation();

event.preventDefault(); //没有链接不需要加这个。

这样即可实现阻止冒泡和默认行为。

使用框架时还有更简便的方式：在事件处理程序中返回 false。这在 jQuery 中是对同时调用 stopPropagation() 和 preventDefault() 的一种简写形式。

【详细代码见上面，记得载入jquery.js。】

event.target与this的判断

此外，也可以在每个 click 事件中加入判断逻辑。

 
$('#id').click(function(event){
if(event.target==this){
//do something
} 
}) 

解析：事件处理程序中的变量 event 保存着当前事件对象。而 event.target 属性保存着发生事件的目标元素。该属性源自 DOM API 规范，但并非所有浏览器都实现了它。jQuery 对此进行了必要的扩展，确保在任何浏览器中均可使用此属性。通过 .target，可以确定 DOM 树中首先接收到事件的元素（即实际被单击的元素）。同时，我们知道 this 引用的是绑定处理函数的 DOM 元素，因此可以编写上述代码进行判断。

不过推荐使用 return false，Jquery绑定事件的话。