JavaScript 阻止默认事件与事件冒泡详解

阻止默认事件

在 JavaScript 中，可以使用 event.preventDefault() 方法来阻止元素的默认行为。

常见的默认事件包括 a 标签的点击跳转以及 button、radio 等表单元素的交互行为。

需要注意的是，div 等普通容器元素通常没有默认的交互事件。

以下是一个具体的应用示例。

<a href="http://www.baidu.com" target="_black">百度</a>

var samp = document.getElementByTagName("a");
samp.addEventListener("click",function(e){e.preventDefault()},false);

上述代码的解释是：点击链接时，正常情况下页面会跳转，但通过阻止默认事件，页面将不再跳转到百度。

阻止事件冒泡

另一种常见需求是使用 event.stopPropagation() 来阻止事件冒泡。

在嵌套元素结构中，事件通常会向上冒泡，这可能会引发非预期的副作用。

下面通过一个嵌套 div 的例子来说明。

<div id="c1" onclick="alert(1)">
<div id="c2" onlick="alert(2)">
<input type="button" id="c3" value="点击" onclick="alert(3)">
</div>
</div>

当点击内部的 button 时，浏览器会依次弹出 3、2、1。虽然初衷可能只是触发 button 本身的事件，但由于冒泡机制，父级元素的事件也被触发。在复杂项目中，若父子元素均绑定了重要逻辑，这种冒泡可能导致严重问题，此时需要阻止冒泡。

解决方法是为 input 注册 click 事件，并在其中阻止冒泡。

document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);

通过上述设置，即可成功阻止事件冒泡。

此外，推荐参考一款关于 JS 事件的在线查询工具，该工具归纳了 JS 常用的事件类型与函数功能。

相关资源标题为：javascript事件与功能说明大全。

访问地址为：http://tools.jb51.net/table/javascript_event