阻止冒泡和事件委托

Posted 2021-03-02 chengzizhou

tags:

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

p73

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 300px; height: 300px; background: red;">
            <div style="width: 200px; height: 200px; background: blue;"></div>
        </div>
    </body>
    <script type="text/javascript">
        var oDiv = document.getElementsByTagName("div");
        oDiv[0].onclick=function(){
            alert(‘a‘);
        }
        oDiv[1].onclick=function(e){
            var evt = e || event;
            //ie阻止冒泡
            //evt.cancelBubble = true;
            //w3c:
            evt.stopPropagation();
            alert(‘b‘);
        }
        
    </script>
</html>

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

js函数中如何阻止事件冒泡

阻止冒泡的两种方式事件委托

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

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

阻止默认事件，事件委托和周期