本篇文章为大家展示了JavaScript阻止事件冒泡的方法是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
我们需要注意的是:事件冒泡本身的特性,会带来的坏处,也会带来的好处,在后续的博客我会详细说明。
所以我们在这里将论述一下如何阻止事件冒泡。
比如现在有一个子盒子和一个父盒子,子盒子和父盒子二者都有点击事件,但是此时,当我们点击子盒子时,只想让子盒子显示点击事件。这里我们就要用到阻止事件冒泡的方法来隔断父盒子的事件显示。
先创建两个盒子,并给他们添加点击事件,如下所示:
<!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()
方法,
如下所示:
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阻止事件冒泡的方法是什么,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。