如何在js中解决阻止事件冒泡问题？

@德玛玩前端

已于 2023-09-12 18:27:34 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Window 文章标签： javascript 前端开发语言

于 2023-04-06 17:49:45 首次发布

本文链接：https://blog.csdn.net/Code_King006/article/details/129995311

Window 专栏收录该内容

1 篇文章

订阅专栏

文章详细介绍了JavaScript中的内联事件处理，特别是如何阻止事件冒泡，包括使用`event.stopPropagation()`和`returnfalse`。还提到了`event.preventDefault()`的作用，它能阻止默认行为但不阻止事件冒泡。示例代码展示了这些方法在多层嵌套元素点击事件中的应用。

1. 内联onclick事件处理方法

内联onclick事件虽然没有显式的传入event对象，但是在click事件中还是可以使用event对象的，不过这里有个细节需要注意，那就是event总是保存着最后发生的那个事件对象的信息。
所以，在处理的时候，要把握好时机。

<span οnclick='clickSpan();'>点击span</span>
</div>
<script>
function clickSpan(){
    // 如果要在这里阻止事件冒泡，那么可以使用event对象
    event.stopPropagation();
    event.preventDefault();
    //如果这里还有ajax请求数据，stopPropagation要在ajax之前
    console.log('clickSpan');
}
function clickDiv(){
     console.log('clickDiv');
}
</script>

2. js阻止事件冒泡方法

<body>
　　<form id="form1" runat="server">
　　　　<div id="divOne" onclick="alert('我是最外层');">
　　　　　　<div id="divTwo" onclick="alert('我是中间层！')">
　　　　　　　　<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com"onclick="alert('我是最里层！')">点击我</a>
　　　　　　</div>
　　　　</div>
　　</form>
</body>

比如上面这个页面，
分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;
他们都有各自的click事件，最里层a标签还有href属性。
运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层
---->然后再链接到百度.
这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。
事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。

如何来阻止?

1.event.stopPropagation();

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

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

2.return false;

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

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

由此可以看出：

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