锐客网

  1. 首页 > it技术 > >

JavaScript阻止事件冒泡的方法

我们需要注意的是：事件冒泡本身的特性，会带来的坏处，也会带来的好处，在后续的博客我会详细说明。

  • 所以我们在这里将论述一下如何阻止事件冒泡。
  • 比如现在有一个子盒子和一个父盒子，子盒子和父盒子二者都有点击事件，但是此时，当我们点击子盒子时，只想让子盒子显示点击事件。这里我们就要用到阻止事件冒泡的方法来隔断父盒子的事件显示。
先创建两个盒子，并给他们添加点击事件，如下所示：
Document - 锐客网.father{margin: 100px auto; width: 100px; height:100px; overflow: hidden; background-color: palegreen; }.son{width: 50px; height: 50px; margin-left: 25px; margin-top: 25px; background-color: paleturquoise; }

当我们点击子盒子的点击事件时，打印结果为：
JavaScript阻止事件冒泡的方法
文章图片

我们应该怎样阻断父盒子的点击事件呢？

可以直接在子盒子内部的点击事件里面添加stopPropagation()方法，
如下所示：
son.addEventListener('click',function(e){alert('son'); e.stopPropagation(); },false)

此时，运行结果为：
JavaScript阻止事件冒泡的方法
文章图片

阻断成功。

但是需要注意的是：这个方法也有兼容性问题，在低版本浏览器中（IE 6-8 ）通常是利用事件对象cancelBubble属性来操作的。即直接在相应的点击事件里面添加：
e.cancelBubble = true;

如果我们想要解决这种兼容性问题，就可以采用下述方法：
if(e && e.stopPropagation){e.stopPropagation(); }else{window.event.cancelBubble = true; }

【JavaScript阻止事件冒泡的方法】到此这篇关于基于JavaScript阻止事件冒泡的文章就介绍到这了,更多相关JavaScript阻止事件冒泡内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

    推荐阅读


    上一篇：BeyondCompare4下载安装使用超详细步骤

    下一篇：Python|Python Pyqt5多线程更新UI代码实例(防止界面卡死)