作者：大耍酷的微博Katharine | 来源：互联网 | 2023-09-25 17:42
事件冒泡：开始时由最具体的元素接收，让后逐级向上传播到DOM最顶层节点事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。阻止事件冒泡：标准写法:利用事件对象里面的
事件冒泡：开始时由最具体的元素接收，让后逐级向上传播到DOM最顶层节点
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。
阻止事件冒泡：
标准写法:利用事件对象里面的stopPropagation()方法
非标准写法:IE6-8利用事件对象cancelBubble属性
代码示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=">
<title>Documenttitle>
<style>
.father {
background-color: pink;
width: 500px;
height: 500px;
}
.son {
background-color: purple;
width: 200px;
height: 200px;
}
style>
head>
<body>
<div class="father">
<div class="son">son盒子div>
div>
body>
<script>
var son = document.querySelector('.son')
son.addEventListener('click', function (e) {
alert('son')
// 阻止冒泡
e.stopPropagation();
e.cancelBubble = true;
}, false)
var father = document.querySelector('.father')
father.addEventListener('click', function () {
alert('father')
}, false)
document.addEventListener('click', function () {
alert('document')
})
script>
html>
![[译]技术公司十年经验的职场生涯回顾](https://img8.php1.cn/3cdc5/24912/711/b6574f3292f9dc00.png)
京公网安备 11010802041100号