[JavaScript]取消默认行为和事件冒泡-蒲公英云

[JavaScript]取消默认行为和事件冒泡

小鱼儿 2022-11-27 10:17 259阅读 0赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #dv1 { 
            width: 300px;
            height: 300px;
            background: red;
        }
        #dv2 { 
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id='dv1'>
        <div id='dv2'></div>
    </div>
    <a href="http://www.baidu.com/" id='oA'>跳转</a>
    <!--取消了默认行为则a标记无法跳转-->
    <script>
        oA.onclick = function (e) { 
            if (e.preventDefault) {  //阻止默认行为
                e.preventDefault() //w3c
            } else { 
                e.returnValue = false //ie
            }
        }
        dv1.onclick = function () { 
            alert("div1")
        }
        dv2.onclick = function (e) { 
            alert("div1")
            var e = window.event || e;
            if (e.stopPropagation) {  //阻止事件冒泡
                e.stopPropagation(); //w3c
            } else { 
                e.cancelBubble = true; //ie
            }
            //阻止事件冒泡后点击div2就不再会触发div2的事件了
        }
    </script>
</body>
</html>

更多阻止事件冒泡、事件捕获以及应用场景相关内容查看：
https://blog.csdn.net/qq\_43540219/article/details/107826683?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522159741341919195162513654%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request\_id=159741341919195162513654&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2blogfirst\_rank\_v2~rank\_blog\_v1-1-107826683.pc\_v2\_rank\_blog\_v1&utm\_term=%E5%86%92%E6%B3%A1&spm=1018.2118.3001.4187