jquery阻止事件冒泡

最新推荐文章于 2022-02-14 16:56:05 发布

蓝假儿

最新推荐文章于 2022-02-14 16:56:05 发布

阅读量157

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_30087937/article/details/79395987

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

冒泡

如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。例如：

<body>
    <div style="width:300px;height:300px;background-color:skyblue;">
        <input type="button" value="button"/>
    </div>
</body>

如果document、div、input三个元素绑定了同一个事件，就会产生冒泡：

    $(document).click(function(){
        alert("document");
    });
    $("div").click(function(){
        alert("div");
    });
    $(":button").click(function(){
        alert("button");
    });

当点击button时，会先弹出button、然后是div、然后是document

解决方法：

方式一：event.stopPropagation();

1  $("#div1").mousedown(function(event){
2      event.stopPropagation();
3  });

方式二：return false;

1   $("#div1").mousedown(function(event){
2   　　return false;
3   });

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

蓝假儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery阻止事件冒泡

冒泡如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。例如：&lt;body&gt; &lt;div style="width:300px;height:300px;background-color:skyblue;"&gt; &lt;input type="button" value="button"/&gt; &lt;/
复制链接

扫一扫