What is event bubbling
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">
<p onclick="test()" style="background: blue">
wubin.pro <br>
<span style="background: green" onclick="inner()">Zi Qin blog</span>
</p>
</div>
<script>
function inner() {
alert('inner');
}
function test() {
alert('test')
}
function box() {
alert('box')
}
</script>
The layout structure is as follows
A total of single-layer elements
From outside to inside: div, p, span
Each element has a stand-alone event
When you click div to trigger the pop-up box
When you click the p tag, test and box will pop up in turn
When you click the span tab, it will pop up: inner, test, box
This is the event bubble
Bubbling from the innermost layer to the outermost layer
How to stop
A lot of times we don't want things to bubble up
That is, when I click p, only test will pop up
When you click span, only inner will pop up
1.event.stopPropagation()
<body>
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">
<p onclick="test()" style="background: blue">
wubin.pro <br>
<span style="background: green" onclick="inner(event)">Wu Bin blog</span>
</p>
</div>
<script>
function inner() {
alert('inner');
event.stopPropagation();
}
function test() {
alert('test')
}
function box(event) {
alert('box')
}
</script>
</body>
When I click Ziqin blog again at this time
Just pop inner
2.return false
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
<p style="background: blue">
wubin.pro <br>
<span style="background: green" >Wu Bin blog</span>
</p>
</div>
<script>
$(function () {
$('span').click(function(){
alert('inner');
return false;
})
$('p').click(function(){
alert('test');
})
$('div').click(function(){
alert('box');
})
})
</script>
The effect is the same as the first one
Can prevent the event from bubbling
return false is different from event.stopPropagation()
We change the above code to:
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
<p style="background: blue">
wubin.pro <br>
<a href="https://wubin.pro "style="background: "green" > Ziqin blog</a>
</p>
</div>
<script>
$(function () {
$('a').click(function(event){
alert('inner');
// return false;
event.stopPropagation();
})
$('p').click(function(){
alert('test');
})
$('div').click(function(){
alert('box');
})
})
</script>
It can be seen that
When return false is used
The default line (jump page) of the a tag is also blocked
When using event.stopPropagation()
Pop inner first
Then the page jumps
summary
<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
<p style="background: blue">
wubin.pro <br>
<a href="https://wubin.pro "style="background: "green" > Ziqin blog</a>
</p>
</div>
<script>
$(function () {
$('a').click(function(event){
alert('inner');
// return false;
// event.stopPropagation();
event.preventDefault();
})
$('p').click(function(){
alert('test');
})
$('div').click(function(){
alert('box');
})
})
</script>
return false: prevent event bubbling and default behavior
event.stopPropagation(): prevent event bubbling individually
event.preventDefault(): block default behavior individually