js jquery阻止冒泡事件

最新推荐文章于 2023-03-15 16:59:07 发布

余不二

最新推荐文章于 2023-03-15 16:59:07 发布

阅读量701

点赞数

分类专栏： project:前端开发文章标签： javascript jquery 冒泡事件父元素事件

本文链接：https://blog.csdn.net/yu452148611/article/details/50674740

版权

project:前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

event.stopPropagation(); -- 阻止元素冒泡事件
注：嵌套元素一般都存在冒泡事件，会带来某些影响

例：<div id="c1" οnclick="alert(1)">

</div>

这里点击button的时候，浏览器会先后弹出3,2,1，本来只想让绑定在button上的事件发生,却无意中触发了它的两个父级上的事件，这里我们只是做了一个简单测试，试想如果在项目开发中，某个按钮和他的父级同时绑定了很重要的事件，那么结果会惨不忍睹。这时的处理方法就是阻止冒泡事件。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易拖放效果</title>




<style>
    #DragContent{
        width:500px;
        height:500px;
        background:#efefef;
        position: relative;
    }
    #idDrag {
        position: absolute;
        top: 0;
        left: 0;
        border: 5px solid #0000ff;
        background: #c4e3fd;
        width: 50px;
        height: 50px;
    }
</style>
</head>


<body>








<div id="DragContent">
    <div id="idDrag"></div>
</div>






我想按住拖动元素放开了不触发DragContent的点击事件
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>




<script>
$(document).ready(function(){
    $('#DragContent').bind('click', function(){
        console.log('dragcontent');
    });
    $('#idDrag').bind('click', function(){
        console.log('iddrag');
        return false;
    });
});
</script>




</body>
</html>

只要在绑定的时候return false就行了

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

余不二

关注

0
点赞
踩
0

收藏

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

event.stopPropagation(); -- 阻止元素冒泡事件注：嵌套元素一般都存在冒泡事件，会带来某些影响例：这里点击button的时候，浏览器会先后弹出3,2,1，本来只想让绑定在button上的事件发生,却无意中触发了它的两个父级上的事件，这里我们只是做了一个简单测试，试想如果在项目开发中，某个按钮和他的父级同时绑定了很重要的
复制链接

扫一扫

专栏目录