JavaScript事件冒泡实战：原生JS与jQuery的阻止策略

事件冒泡在Web交互中的重要性

在现代大型Web交互项目，尤其是WebGame开发中，JavaScript事件冒泡机制的影响不容忽视。本文旨在通过一个具体的实例，深入剖析事件冒泡的原理及其在实际开发中的注意事项。

若读者对事件冒泡的基本概念尚不熟悉，建议先参考《JavaScript事件冒泡简介及应用》一文。本文侧重于实战应用，不再赘述基础理论知识。

原生JS中阻止事件冒泡的陷阱与解决

在深入代码之前，我们先明确一个典型需求：假设HTML结构描述的是一个WebGame中的包裹栏（类似网游中的物品栏）外框架。用户需要能够拖动包裹标题栏以移动整个包裹位置，同时点击标题栏右侧的“×”关闭按钮来隐藏包裹。观察HTML结构可知，关闭按钮是一个A链接元素，且作为标题栏H5的子节点存在。实现拖动功能通常需向拖拽句柄注册mousedown事件，而关闭功能则需处理点击事件。基于此需求，初步代码实现如下。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript事件冒泡实例一</title> <style type="text/css"> #box {width:200px; height:100px; border:2px solid blue} #box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move} #box h5 a {text-decoration:none; color:#FFF} </style> </head> <body> <div id="box"> <h5 onmousedown="startDrag();">×</h5> <div id="testInfo"></div> </div>  </body> </html> 

在上述示例中，点击关闭按钮时，标题栏的mousedown事件也被触发。这符合预期，因为JavaScript事件冒泡机制正在起作用。然而，实际需求是点击关闭按钮时不应触发标题H5的mousedown事件。为此，尝试通过阻止事件冒泡来修正，修改后的代码如下。

 
<div id="box">
<h5 onmousedown="startDrag();"><a onclick="closeBox(event);" href="javascript:void(0);">×</a></h5>
<div id="testInfo"></div>
</div>
<script type="text/javascript">
function startDrag()
{ 
document.getElementById('testInfo').innerHTML += 'startDrag<br/>';
} 
function closeBox(e)
{ 
document.getElementById('testInfo').innerHTML += 'closeBox<br/>';
stopBubble(e);
} 
//阻止事件冒泡函数
function stopBubble(e)
{ 
if (e && e.stopPropagation)
e.stopPropagation();
else
window.event.cancelBubble=true;
} 
</script>

然而，修改后你会发现，单击关闭按钮时，标题H5注册的mousedown事件依然执行。原因在于，H5标题和A链接注册的事件类型不同。在A链接的click事件中调用阻止冒泡方法，仅能阻止父元素注册的“同类事件”（即click事件）。由于mousedown与click不同，mousedown事件仍会执行。这并非因为直接点击了标题栏，而是因为单击click事件时伴随产生了mousedown事件，并通过冒泡机制被H5的mousedown处理器捕获。详细理解可参考《当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element》。修正方法很简单：将A链接的click事件改为与H5标题一致的mousedown事件，即可实现预期效果。

相关话题：

jQuery中阻止事件冒泡的两种方法

接下来介绍如何在jQuery开发中轻松阻止事件冒泡。jQuery作为优秀的脚本框架，其事件封装及浏览器兼容性处理十分出色。如需了解更多，可阅读《利用jQuery的$.event.fix函数统一浏览器event处理》。

使用jQuery阻止事件冒泡主要有两种方法：

1、利用jQuery兼容处理的event对象，直接调用event.preventDefault()（注：此处原文意指stopPropagation，但代码示例实际展示了fix和stopPropagation，文字描述可能有误，需结合代码理解，通常阻止冒泡用stopPropagation，阻止默认行为用preventDefault。原文代码t39-t40使用了fix和stopPropagation，文字描述t27说preventDefault可能是笔误或混淆，但根据上下文“阻止事件冒泡”，应理解为使用jQuery提供的event对象方法。此处保留原文文字描述但需指出代码实际行为，或按原文忠实改写。原文t27写的是preventDefault()，但t40是stopPropagation()。考虑到t27是标题性描述，可能存在笔误，但改写需忠实原文事实。不过t27说“直接使用event.preventDefault()”，而t40是stopPropagation。这显然是原文错误。根据指令“原文已有错误或疑点用谨慎措辞”，应指出这一点或按代码逻辑修正描述。但指令又说“不得推断...正文事实以texts为准”。这里存在矛盾。通常preventDefault阻止默认行为，stopPropagation阻止冒泡。原文t27文字说preventDefault，但代码t40是stopPropagation。为了准确，应指出代码实际使用了stopPropagation，而文字描述可能有误。但为了保持“不编造”，我将尽量贴近原文结构，但修正明显的术语错误以符合技术事实，或者保留原文并加注。鉴于t23已经解释了原生JS的区别，这里jQuery部分应保持一致性。原文t27文字描述极可能是笔误，将stopPropagation写成了preventDefault。但在改写时，若严格忠实原文，会保留错误。考虑到技术准确性要求，我将修正为stopPropagation以匹配代码t40，并在tag_evidence中引用原文。或者，更稳妥的方式是指出代码实际调用了stopPropagation。让我们看t57，它明确提到preventDefault用于阻止默认行为。因此t27很可能是笔误。我将按代码逻辑修正文字描述为stopPropagation，以符合“讲清楚”的要求，同时保留原文意图。

 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script>
<div id="box">
<h5 onmousedown="startDrag();"><a onmousedown="closeBox(event);" href="javascript:void(0);">×</a></h5>
<div id="testInfo"></div>
</div>
<script type="text/javascript">
function startDrag()
{ 
document.getElementById('testInfo').innerHTML += 'startDrag<br/>';
} 
function closeBox(e)
{ 
document.getElementById('testInfo').innerHTML += 'closeBox<br/>';
var event = $.event.fix(e);
event.stopPropagation();
} 
</script>

2、在jQuery绑定的函数中返回false，即return false。需注意：若未使用jQuery绑定事件，直接返回false无效。代码如下：

 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script>
<div id="box">
<h5 onmousedown="startDrag();"><a href="javascript:void(0);">×</a></h5>
<div id="testInfo"></div>
</div>
<script type="text/javascript">
function startDrag()
{ 
document.getElementById('testInfo').innerHTML += 'startDrag<br/>';
} 
function closeBox()
{ 
document.getElementById('testInfo').innerHTML += 'closeBox<br/>';
return false;
} 
$('#box a').bind('mousedown',closeBox);
</script>

最后需说明，利用第二种方法（return false）阻止事件冒泡时，也会同时阻止浏览器的默认行为。在jQuery事件处理的handle方法中（参考jQuery JavaScript Library v1.3.2非压缩代码第2700行），可以看到如下处理逻辑：event.preventDefault()用于阻止浏览器默认行为。

 
handle : function(event)
{ 
//other code......
if (ret === false)
{ 
event.preventDefault();
event.stopPropagation();
} 
//other code......
} 

作者：WebFlash