js中防止事件传播的方法

最新推荐文章于 2021-03-24 20:59:12 发布

weixin_30951231

最新推荐文章于 2021-03-24 20:59:12 发布

阅读量95

点赞数

原文链接：http://www.cnblogs.com/laoguiaabb/p/8024246.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            background-color: #2b99ff;
            height: 400px;
            width: 500px;
        }
        #div2{
            background-color: #e59373;
            height: 170px;
            width: 180px;
        }
    </style>
</head>
<body>
    <div id="div1" οnclick="func1()">
        <div id="div2" οnclick="func2(event)"></div>
    </div>
<script>
    function func1() {
        alert("div1");
    }
    function func2(e) {
        alert("div2");
        e.stopPropagation();            // 此图形因为div2标签是嵌套在DIV1里的 如果点击div2区域触发事件,也同事会触发div1的区域事件,
　　　　　　　　　　　　　　　　　　　　　　　　　// 用stopPropagation 来阻止事件的传播 此时点击div2 只有div2弹出
    }
</script>
</body>
</html>