Stop event bubbling - e.stopPropagation()
Introduction to event bubbling
Event bubbling: initially received by specific elements, and then propagated up to the topmost node of the DOM step by step.
The characteristics of event bubbling itself, the disadvantages it will bring, and the benefits it will bring, we need to be flexible.
Event bubbling example and effect diagram:
In the effect diagram, I clicked the son box to trigger the bubbling event, and both the father box and document were also triggered. This is something we sometimes don't want to happen during development.
For example, we want to check the items in the shopping cart, but we don't want to enter the details page of the items (here, the user needs to only check the items), then we need to prevent the event from bubbling.
Sample code:
<!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>15-阻止事件冒泡</title>
<style>
.father {
margin: 10px auto;
width: 150px;
height: 150px;
background-color: blueviolet;
position: relative;
cursor:pointer;
}
.son {
width: 80px;
height: 80px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
line-height: 80px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
<script>
var divs = document.querySelectorAll('div')
// 父div注册绑定事件
divs[0].addEventListener('click',function(){
alert('father')
})
// 子div注册绑定事件
divs[1].addEventListener('click',function(){
alert('son')
})
document.addEventListener('click',function(){
alert('document')
})
</script>
</body>
</html>
e.stopPropagation() - available for ie9 and above
The event.stopPropagation() method stops the event from bubbling up to the parent element, preventing any parent event handlers from being executed.
Example and effect diagram of preventing event bubbling:
sample code:
<!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>15-阻止事件冒泡</title>
<style>
.father {
margin: 10px auto;
width: 150px;
height: 150px;
background-color: blueviolet;
position: relative;
cursor:pointer;
}
.son {
width: 80px;
height: 80px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
line-height: 80px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
<script>
var divs = document.querySelectorAll('div')
// 父div注册绑定事件
divs[0].addEventListener('click',function(){
alert('father')
})
divs[1].addEventListener('click',function(e){
alert('son')
// 阻止冒泡事件 ie 6、7、8不支持
e.stopPropagation()
})
document.addEventListener('click',function(){
alert('document')
})
</script>
</body>
</html>
This is non-standard, use e.cancelBubble = true in ie6, 7, 8;
the standard way of writing in ordinary browsers is to use e.stopPropagation() method;
in lower version browsers we use cancelBubble = true;
Compatibility solution to prevent bubbling events
Code example:
if(e && e.stopPropagation){
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}