我们需要注意的是：事件冒泡本身的特性，会带来的坏处，也会带来的好处，在后续的博客我会详细说明。 所以我们在这里将论述一下如何阻止事件冒泡。比如现在有一个子盒子和一个父盒子，子盒子和父
我们需要注意的是：事件冒泡本身的特性，会带来的坏处，也会带来的好处，在后续的博客我会详细说明。
先创建两个盒子，并给他们添加点击事件，如下所示：
<!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阻止事件冒泡的文章就介绍到这了,更多相关JavaScript阻止事件冒泡内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: JavaScript阻止事件冒泡的方法
本文链接: https://www.lsjlt.com/news/159137.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0