JS阻止默认事件和冒泡示例：preventDefault与stopPropagation用法

本文详细解析 JavaScript 中阻止默认事件和事件冒泡的方法。通过 preventDefault() 阻止链接跳转等默认行为，利用 stopPropagation() 防止嵌套元素事件向上触发。结合具体代码示例，说明如何处理表单、链接及嵌套 DOM 结构中的事件冲突，确保前端交互符合预期。

阻止默认事件

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

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

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

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

HTML 代码片段如下：

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

对应的 JavaScript 处理代码如下：

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

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

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

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

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

HTML 结构代码如下：

<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 事件，并在其中阻止冒泡。

JavaScript 代码如下：

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

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

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

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

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