JS点击子元素不触发父元素点击事件(js阻止冒泡)

js阻止冒泡

<html>

<title></title>

<head>

    <meta charset="utf-8">

    <style type="text/css">

        .divone{width:100px;height:100px;background:black;position: relative;cursor: pointer}

        .divchild{position: absolute;margin:10px;width:50px;height:50px;background:white;cursor: pointer}

    </style>

    <script type="text/javascript">

        function divone(){

            //这里是divone事件的代码

            console.log('divone事件');

            stopPropagation();

        } 

        function divchild(){

            //这里是divchild事件的代码

            console.log('divchild事件');

            stopPropagation();

        }

        function stopPropagation(e) {

            e = e || window.event;

            if(e.stopPropagation) { //W3C阻止冒泡方法

                e.stopPropagation();

            } else {

                e.cancelBubble = true; //IE阻止冒泡方法

            }

        }

    </script>

</head>

<body>

    <div class="divone" onclick="divone(this)"> 

        <div class="divchild" onclick="divchild(this)"></div> 

    </div> 

</body>

</html>

巴特西

JS点击子元素不触发父元素点击事件(js阻止冒泡)

最新文章

热门文章