文章正文

html页面中阻止外层onclick事件传播

【文章】2020-04-23

简介html页面中阻止外层onclick事件传播

问题描述：在实现页面过程中，通常会遇见onclick事件的嵌套问题，当点击内层标签的onclick事件时，就会触发外层标签的onclick事件。这就是onclick事件传播问题。

示例：

<body>
  <p onclick="click2()">外层click事件
    <p onclick="click1()">内层click事件</p>
  </p>
</body>

js代码：

 <script>
            function click1() {
                alert('click1');
            }

            function click2() {
                alert('click2');
                cancelBubble();
            }
            //阻止click事件传播方法
            function cancelBubble(e) {
                var evt = e ? e : window.event;
                if(evt.stopPropagation) { //W3C 
                    evt.stopPropagation();
                } else { //IE      
                    evt.cancelBubble = true;
                }
            }            
 </script>

打赏支持

感谢您的支持，加油!

打开微信扫码打赏，你说多少就多少

找书费时，联系客服快速获取!

扫码支持

在线客服8:30-22:30，若离线请留言！

获取教程，请联系在线客服!

扫码支持

在线客服8:30-22:30，若离线请留言！

热门阅读

找PDF电子书，太费时间?

  • 微信扫描二维码，让客服快速查找。

    • 在线客服8:30-22:00，若离线请留言！