在div里面加一个span,分别给span、div、body一个点击响应函数,当点击span的时候,因为冒泡,则会响应3个响应事件,如果取消span冒泡,则span事件不会向上传导
知识点:
事件的冒泡:(Bubble)
所谓的冒泡指得就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
如果不希望事件的冒泡可以通过事件对象来取消冒泡
取消冒泡:
将事件对象的cancelBubble设置为true,既可以取消冒泡
event.cancelBubble=true;
详细代码:
<!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>
#box1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1 {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
/*
事件的冒泡:
所谓的冒泡指得就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
*/
//为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function (event) {
event = event || window.event;
alert("我是span单击响应函数");
//取消冒泡
event.cancelBubble = true;
};
//为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function () {
alert("我是div box1单击响应函数");
};
//为body绑定一个单击响应函数
document.body.onclick = function () {
alert("我是body单击响应函数");
};
};
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
结果: