本文详解JavaScript中事件冒泡机制及三种阻止方式。通过嵌套DOM结构示例，对比event.stopPropagation()仅阻止冒泡、return false同时阻止冒泡与默认行为、event.preventDefault()仅阻止默认行为的差异，帮助开发者根据需求选择合适方案。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%>
<!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 runat="server">
<title>Porschev---Jquery 事件冒泡</title>
<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层！')">
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert('我是最里层！')">点击我</a>
</div>
</div>
</form>
</body>
</html>事件冒泡机制与示例
以页面结构为例，
存在三层嵌套关系：divOne为最外层容器，divTwo为中间层，hr_three为最内层元素；
各层均绑定了各自的click事件，且最内层的a标签还具备href属性。
运行页面并点击“点击我”按钮时，依次触发弹窗提示：我是最里层---->我是中间层---->我是最外层
---->随后页面跳转至百度。
这一现象即为事件冒泡：尽管仅点击了ID为hr_three的元素，却依次执行了三层alert操作。
事件冒泡路径（以标签ID表示）：hr_three----> divTwo----> divOne，即由最内层向最外层逐级传递。
阻止事件冒泡的三种方法
如何有效阻止该行为？
1. 使用event.stopPropagation();
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>再次点击“点击我”，仅弹出：我是最里层，随后正常跳转至百度
2. 使用return false;
若在事件处理函数头部加入以下代码
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>再次点击“点击我”，仅弹出：我是最里层，但不会执行跳转至百度的操作
由此可得出以下结论：
1. event.stopPropagation();
在事件处理过程中，该方法仅阻止事件冒泡，但不阻止默认行为（因此超链接跳转仍会执行）。
2. return false;
在事件处理过程中，该方法既阻止事件冒泡，也阻止默认行为（例如上述示例中未执行超链接跳转）。
此外，还有一种与冒泡相关的处理方式：
3. event.preventDefault();
若将其置于头部A标签的click事件中，点击“点击我”。
会发现依次弹出：我是最里层---->我是中间层---->我是最外层，但最终并未跳转至百度
其作用为：在事件处理过程中，不阻止事件冒泡，但阻止默认行为（仅执行所有弹窗，不执行超链接跳转）。
以上即为本次介绍的全部知识点内容，感谢大家对本站的支持。