Events in JS are bubbling by default and are propagated layer by layer. You can stop the propagation of events in the DOM level through the stopPropagation() function. As in the following example:
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stopPropagation()use - Qiongtai Blog</title>
</head>
<body>
<button>button</button>
</body>
</html>
[/code]
No addedstopPropagation()
[code]
var button = ('button')[0];
=function(event){
alert('button click');
};
=function(event){
alert('body click');
}
The DOM propagates up layer by layer, so clicking the button also spreads to the body layer, so the click of the body layer also responds. As a result, two warning boxes pop up, namely button and body.
Added stopPropagation()
var button = ('button')[0];
=function(event){
alert('button click');
// Stop DOM event hierarchy propagation ();
};
=function(event){
alert('body click');
}
The stopPropagation() function is used in the button's click event handling function to stop the event propagation function, so after the warning box from the button click event pops up, the body cannot be propagated, and the body's warning box will not pop up again. As a result, the warning box is only discussed once.
When writing JS, many children's shoes often ignore the characteristics of DOM events spreading layer by layer, resulting in abnormalities in the program. If you need to know more in-depth knowledge, you can find information about the bubbling of JS events.