本文详解在JavaScript和jQuery中阻止事件冒泡的多种实现方式。针对IE与W3C标准差异，介绍了cancelBubble与stopPropagation的兼容写法。同时对比了jQuery中event.stopPropagation()与return false的区别，前者仅阻止冒泡，后者同时阻止默认行为与冒泡，并结合搜索联想框场景给出代码示例。
原生JavaScript阻止冒泡的兼容处理
在实现事件冒泡阻止时，W3C标准与IE浏览器采用了不同的处理机制，因此代码编写时需进行兼容性处理。
具体实现代码如下：
function stopPro(evt){
var e = evt || window.event;
//若设置returnValue属性，其优先级高于事件句柄的返回值。将其设为false可取消源元素的默认动作。
//针对IE浏览器，可通过设置returnValue为false来阻止默认行为。
//window.event?e.returnValue = false:e.preventDefault();
window.event?e.cancelBubble=true:e.stopPropagation();
} 另一种兼容写法如下：
具体实现代码如下：
function cancelBubble(e) {
var evt = e ? e : window.event;
if (evt.stopPropagation) {
//符合W3C标准的浏览器
evt.stopPropagation();
}
} else {
//针对IE浏览器的兼容处理
evt.cancelBubble = true;
} jQuery中阻止事件冒泡的两种方案
jQuery提供了两种主要方式来阻止事件冒泡。
方式一：使用event.stopPropagation();
具体实现代码如下：
$("#div1").mousedown(function(event){
event.stopPropagation();
}); 方式二：直接返回false;
具体实现代码如下：
$("#div1").mousedown(function(event){
return false;
}); 阻止默认动作与冒泡的区别及场景应用
jQuery中阻止默认动作是指通知浏览器不执行与事件关联的默认行为。
例如：
具体实现代码如下：
$("a").click(function(event){
event.preventDefault(); //阻止默认动作，链接不会跳转。
alert(4);//此处代码仍会执行弹出
event.stopPropagation();//阻止事件冒泡，上级元素的单击事件不会被触发
return false;//不仅阻止事件向上冒泡，还阻止了事件本身的执行
}); 这两种方式存在明显区别：return false 既阻止事件向上冒泡，也阻止事件本身；而 event.stopPropagation() 仅阻止事件向上冒泡，不阻止事件本身的执行。
应用场景示例：Google和百度的搜索联想框，当弹出下拉列表时，若用户在下拉区域点击，需确保光标仍保持在文本输入框内。
jQuery实现案例：
jQuery阻止冒泡完整案例
具体实现代码如下：
<script src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$("#aa").click(function(event){
alert("aa");
event.preventDefault();
event.stopPropagation();
alert(3);
});
$("#ee").click(function(){
alert("ee");
});
$("a").click(function(event){
event.preventDefault();
alert(4);
event.stopPropagation();
return false;
});
});
</script>
</head>
<body>
<div id="ee">
aaaaaaa
<input id="aa" type="button" value="test" />
<a href="http://baidu.com">baidu.com</a>
</div>
</body>JavaScript实现案例：
原生JavaScript阻止冒泡完整案例
具体实现代码如下：
function tt(){
alert("div");
}
function ttt(){
var e = arguments.callee.caller.arguments[0] || window.event;
window.event?e.returnValue = false:e.preventDefault();
alert(3);
window.event?e.cancelBubble:e.stopPropagation();
alert(4);
}
</script>
</head>
<body>
<div onclick = "tt();">
ccccc
<a href="http://baidu.com" onclick="ttt();">baidu.com</a>
</div>