js jquery阻止冒泡事件

╰+攻爆jí腚メ 2022-08-20 07:27 193阅读 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);