JS事件冒泡（阻止

最新推荐文章于 2023-06-30 10:39:30 发布

ibmfashion

最新推荐文章于 2023-06-30 10:39:30 发布

阅读量426

点赞数

分类专栏： javascript

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

看个例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;">
<div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
alert('我点击了obj1');
}
obj2.onclick = function(e){
alert('我点击了obj2');
}
</script>
</body>
</html>

在通常情况下，我们只希望事件发生在它的目标而并非它的父级元素上，只需加个stopBubble方法，即可取消事件冒泡，详见以下代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;">
<div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡的通用函数
function stopBubble(e){
  // 如果传入了事件对象，那么就是非ie浏览器
  if(e&&e.stopPropagation){
   //因此它支持W3C的stopPropagation()方法
   e.stopPropagation();
  }else{
   //否则我们使用ie的方法来取消事件冒泡
   window.event.cancelBubble = true;
  }
}

var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
  alert('我点击了obj1');
}
obj2.onclick = function(e){
  alert('我点击了obj2');
  stopBubble(e);
}
</script>
</body>
</html>

ibmfashion

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件冒泡（阻止

在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。看个例子：http://www.w3.org/1999/xhtml">无标题文档*{ margin:0; padding:0;}
复制链接

扫一扫