JavaScript阻止事件冒泡的方法是什么

本篇文章为大家展示了JavaScript阻止事件冒泡的方法是什么，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

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

• 所以我们在这里将论述一下如何阻止事件冒泡。

• 比如现在有一个子盒子和一个父盒子，子盒子和父盒子二者都有点击事件，但是此时，当我们点击子盒子时，只想让子盒子显示点击事件。这里我们就要用到阻止事件冒泡的方法来隔断父盒子的事件显示。
  

先创建两个盒子，并给他们添加点击事件，如下所示：

当我们点击子盒子的点击事件时，打印结果为：

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

可以直接在子盒子内部的点击事件里面添加stopPropagation()方法，

如下所示：

son.addEventListener('click',function(e){            alert('son');            e.stopPropagation();        },false)

此时，运行结果为：

阻断成功。

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

e.cancelBubble = true;

如果我们想要解决这种兼容性问题，就可以采用下述方法：

if(e && e.stopPropagation){      e.stopPropagation();  }else{      window.event.cancelBubble = true;  }

上述内容就是JavaScript阻止事件冒泡的方法是什么，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。