首页 > 代码库 > 阻止冒泡

阻止冒泡

当父元素有点击事件,子元素也有点击事件时,点击子元素会同时触发 子事件和父事件,解决方法:
<body>
        <div class="a">
            好友<span>+</span>
        </div>
        <script type="text/javascript">
            var a = document.querySelector(".a");
            var span = document.querySelector(‘.a span‘)
            a.onclick = function(){
                alert(1);
            }
            /*
             * 阻止冒泡
             * 当父元素有点击事件,子元素也有点击事件时,点击子元素会同时触发 子事件和父事件,
             * 解决方法:子元素点击事件 加上
             */
            span.onclick = function(e){
                    e = e || window.event;
                    if(e.cancelBubble){
                        e.cancelBubble = true;
                    }else{
                        e.stopPropagation()
                    }
                alert(2);
            }
        </script>
    </body>

 

阻止冒泡