js中e.cancelBubble解决事件冒泡

最新推荐文章于 2022-03-09 19:22:19 发布

原创最新推荐文章于 2022-03-09 19:22:19 发布 · 5.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #阻止事件冒泡

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文通过一个简单的HTML页面示例展示了如何使用JavaScript来处理元素间的点击事件，并介绍了事件冒泡的概念及其如何被阻止。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#par{
width:400px;height:400px;background:white; border:1px solid red;
}
#son{width:200px;height:200px;background:rgb(200,0,0);}
</style>
</head>
<body>
<div id='par'>
<div id="son"></div>
</div>
</body>
<script>
var par = document.getElementById('par');
var son = document.getElementById('son');

son.onclick=function(e){
var e = e ||event;
alert('点击了par');
//阻止事件冒泡

// 标准浏览器有效 IE不行
//e.stopPropagation();

//没有兼容性问题阻止事件冒泡
e.cancelBubble = true;
}

par.onclick=function(){

alert('点击了son');

}

</script>
</html>