阻止冒泡

Posted 虔诚_k

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了阻止冒泡相关的知识,希望对你有一定的参考价值。

当父元素有点击事件,子元素也有点击事件时,点击子元素会同时触发 子事件和父事件,解决方法:
<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>

 

以上是关于阻止冒泡的主要内容,如果未能解决你的问题,请参考以下文章

HTML如何阻止事件冒泡?求源码分析

vue阻止事件冒泡,事件穿透

js阻止冒泡和默认事件(默认行为)详解

js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

JS-阻止冒泡事件与事件委托

JS如何阻止事件冒泡