JavaScript阻止事件冒泡的方法
这篇文章主要介绍了基于JavaScript阻止事件冒泡,事件冒泡 开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。更多详细内容请需要的小伙伴参考下面文章的具体内容希望对你有所帮助
我们需要注意的是：事件冒泡本身的特性，会带来的坏处，也会带来的好处，在后续的博客我会详细说明。
所以我们在这里将论述一下如何阻止事件冒泡。
比如现在有一个子盒子和一个父盒子，子盒子和父盒子二者都有点击事件，但是此时，当我们点击子盒子时，只想让子盒子显示点击事件。这里我们就要用到阻止事件冒泡的方法来隔断父盒子的事件显示。
先创建两个盒子，并给他们添加点击事件，如下所示：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .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; } </style></head><body> <div class="father"> <div class="son"></div> </div> <script> var father = document.querySelector('.father'); var son = document.querySelector('.son'); son.addEventListener('click',function(){ alert('son'); },false) father.addEventListener('click',function(){ alert('father'); },false) </script></body></html> |
当我们点击子盒子的点击事件时，打印结果为：
我们应该怎样阻断父盒子的点击事件呢？
可以直接在子盒子内部的点击事件里面添加stopPropagation()方法，
如下所示：
1 2 3 4 | son.addEventListener('click',function(e){ alert('son'); e.stopPropagation(); },false) |
此时，运行结果为：
阻断成功。
但是需要注意的是：这个方法也有兼容性问题，在低版本浏览器中（IE 6-8 ）通常是利用事件对象cancelBubble属性来操作的。即直接在相应的点击事件里面添加：
1 | e.cancelBubble = true; |
如果我们想要解决这种兼容性问题，就可以采用下述方法：
1 2 3 4 5 | if(e && e.stopPropagation){ e.stopPropagation(); }else{ window.event.cancelBubble = true; } |
到此这篇关于基于JavaScript阻止事件冒泡的文章就介绍到这了
原文链接：https://blog.csdn.net/m0_48375854/article/details/121657874