JavaScript —— 阻止事件冒泡

最新推荐文章于 2025-06-14 21:18:41 发布

转载最新推荐文章于 2025-06-14 21:18:41 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/hellofangfang/p/10694155.html

文章标签：

#javascript

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了JavaScript中的事件冒泡现象，通过示例展示了事件从最内层元素到最外层元素的传递过程。同时，讲解了如何阻止事件冒泡，包括使用`event.stopPropagation()`和`return false`。此外，还提到了`event.preventDefault()`的作用，即阻止默认行为而不阻止事件冒泡。这些知识对于理解和控制JavaScript事件处理至关重要。

<div id="one" onclick="alert('我是最外层');">
    <div id="two" onclick="alert('我是中间层！')">
        <a id="three" href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a>
    </div>
</div>

比如上面这个页面，分为三层：one是第外层，two中间层，three是最里层;
他们都有各自的click事件，最里层a标签还有href属性。

“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.

这就是事件冒泡，本来我只点击ID为three的标签，但是确执行了三个alert操作。
事件冒泡过程（以标签ID表示）：three----> two----> one 。从最里层冒泡到最外层。

如何阻止事件冒泡

1. event.stopPropagation();

<script type="text/javascript">
    $(function() {
        $("#three").click(function(event) {
            event.stopPropagation();
        })
    })
<script>

再点击“点击我”，会弹出：我是最里层，然后链接到百度

2. return false

$(function() {
　　$("#three").click(function(event) {
　　　　return false;
　　})
})

再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面

由此可以看出：
event.stopPropagation(); 阻止了事件冒泡，但是不能阻止默认行为（它就执行了超链接的跳转）。
return false; 阻止了事件冒泡，也阻止了默认行为（它没有执行超链接的跳转）

event.preventDefault();
如果把它放在头部A标签的click事件中，“点击我”。
会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）