html页面中阻止外层onclick事件触发

最新推荐文章于 2021-06-07 19:33:58 发布

spurs611

最新推荐文章于 2021-06-07 19:33:58 发布

阅读量7.3k

点赞数 3

分类专栏： js

本文链接：https://blog.csdn.net/spurs611/article/details/81485732

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在实现页面过程中，我们通常会遇见onclick事件的嵌套问题，当点击内层标签的onclick事件时，还会触发外层标签的onclick事件，我们要实现的就是阻止外层onclick事件的触发。

代码如下：

html代码：

<body>
       
       <div οnclick="show1()">而微软推欧元价格突然发
           <p οnclick="show2()">围绕太阳接近银行股份的法国红酒魔鬼屠夫</p>
       </div>
   </body>

js代码：

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

           function show2() {
               alert('show2');
               cancelBubble();
           }

           function cancelBubble(e) {
               var evt = e ? e : window.event;
               if(evt.stopPropagation) { //W3C
                   evt.stopPropagation();
               } else { //IE
                   evt.cancelBubble = true;
               }
           }
       </script>

我们通过 cancelBubble（）函数可以防止onclick事件穿透。

spurs611

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html页面中阻止外层onclick事件触发

在实现页面过程中，我们通常会遇见onclick事件的嵌套问题，当点击内层标签的onclick事件时，还会触发外层标签的onclick事件，我们要实现的就是阻止外层onclick事件的触发。代码如下：html代码：&lt;body&gt; &lt;!-- 作者：[email protected] 时间：2018-0...
复制链接

扫一扫