The Js bubble mechanism refers to if an element defines event A, such as a click event. If the bubble event is not blocked after the event is triggered, the event will propagate to the parent element and trigger the click function of the parent class.
As shown in the following example:
The code copy is as follows:
<html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
function ialertdouble(e) {
alert('innerdouble');
stopBubble(e);
}
function ialertthree(e) {
alert('innerthree');
stopBubbleDouble(e);
}
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//Stop bubbles from being swelled up;
}
function stopBubbleDouble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//Stop bubbles from being swelled up;
evt.preventDefault();//Block the browser's default behavior so that the link will not jump
}
$(function() {
//Method 1
//$('#jquerytest').click(function(event) {
// alert('innerfour');
// event.stopPropagation();
// event.preventDefault();
//});
//Method 2
$('#jquerytest').click(function() {
alert('innerfour');
return false;
});
});
</script>
<div onclick="alert('without');">without
<div onclick="alert('middle');">middle
<div onclick="alert('inner');">inner</div>
<div onclick="ialertdouble(event)">innerdouble</div>
<p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p>
<p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p>
</div>
</div>
</html>
When you click on inner, 'inner', 'middle' and 'without' will pop up in turn. This is the event bubble.
Intuitively speaking, this is the case, because the innermost area is in the parent node. If the child node is clicked, it is actually clicked on the parent node area, so the event will spread.
In fact, many times, we don’t want events to bubbling, because this will trigger several events at the same time.
Next: Let's click innerdouble. You will find that she is not bubbled because she called the stopBubble() method in the called method ialertdouble(). The method prevents bubbled by judging the browser type (Ie through cancleBubble() and firefox through stopProgation()).
But if it is a link, we will find that it will also prevent bubbles, but it will jump, which is the default behavior of the browser. It needs to be blocked by using preventDefault() method. For details, you can check ialertthree().
At present, the mainstream people use jquery to bind click events, which is much simpler.
We can pass in the parameter event when clicking on the event, and then directly
event.stopPropagation();
event.preventDefault(); //No link is required to add this.
That's all.
The framework is good, but in fact there is a simpler one. Return false in the event handler, which is an abbreviation method for calling stopPropagation() and preventDefault() on the event object at the same time.
[See the detailed code above, remember to load jquery.js. 】
In fact, you can also add judgments to each click event:
The code copy is as follows:
$('#id').click(function(event){
if(event.target==this){
//do something
}
})
Analysis: The variable event in the event handler saves the event object. The event.target property holds the target element of the event. This property is specified in the DOM API, but is not implemented by all browsers. jQuery makes necessary extensions to this event object so that this property can be used in any browser. With .target, it is possible to determine the element in the DOM that first receives the event (i.e. the element that is actually clicked). Moreover, we know that this refers to the DOM element that handles events, so we can write the above code.
However, it is recommended to use return false, if Jquery binds events.