本文介绍了在 JavaScript 中阻止事件冒泡和浏览器默认行为的具体实现方式。通过区分标准 W3C 方法与 IE 兼容方案，分别演示了如何使用 stopPropagation 和 cancelBubble 控制事件传播，以及利用 preventDefault 和 returnValue 取消默认动作，帮助开发者解决事件传递与表单交互问题。
阻止事件冒泡的实现
首先，需要理解如何阻止事件冒泡，从而将事件触发机制转换为捕获型。在代码实现中，通常通过判断事件对象是否存在以及是否支持 stopPropagation 方法来区分浏览器类型。对于支持 W3C 标准的浏览器，直接调用 e.stopPropagation()；而对于旧版 IE 浏览器，则需设置 window.event.cancelBubble 为 true 来取消冒泡。
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
取消浏览器默认行为
其次，当用户按键后，若不希望该按键事件继续传递给如 HTML 文本框等对象，可以通过取消返回值来停止默认事件的默认行为。具体实现上，W3C 标准推荐使用 e.preventDefault() 来阻止默认动作，而 IE 浏览器则通过设置 window.event.returnValue 为 false 来实现相同效果，最终返回 false 以确保兼容性。
//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>效果测试</title>
<script language="javascript" type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('div.c1').click(function(e){alert('单击了div');});
$('div.c2').click(function(e){alert('单击了div');stopBubble(e);});
$(document).click(function(e){alert('单击了document');});
$('#txt1').val('123');
$('#txt1').click(function(e){stopBubble(e);});
$('#txt1').keydown(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });
})
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}
</script>
<style type="text/css">
body{
font-size:14px;
}
}
.c1{
font-family:"Arial Unicode MS"
}
.c2{
font-family:helvetica,simsun,arial,clean
}
</style>
</head>
<body>
<div class="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>
<div class="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>
<div><input id="txt1" name="Text1" type="text" /></div><hr/>
</body>
</html>
以上即为 JavaScript 中处理事件冒泡与默认行为的核心内容。希望这些示例代码和说明能对您的学习或工作提供实际帮助，欢迎继续支持本站获取更多技术资源。