JS bubbling event detailed and blocking examples _javascript tips

The JS bubbling mechanism means that if an element defines event A, such as the Click event, if the event is triggered and the bubbling event is not blocked, then the event propagates to the parent element, triggering the Click function of the parent class.
As shown in the following example:

Copy Code code as follows:

<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 Bubbling
}

function Stopbubbledouble (e) {
var evt = e| | window.event;
Evt.stoppropagation?evt.stoppropagation ():(evt.cancelbubble=true);/Stop Bubbling
Evt.preventdefault ()//prevents browser default behavior so that the link does not jump
}

$ (function () {
Method One
$ (' #jquerytest '). Click (Function (event) {
Alert (' Innerfour ');
Event.stoppropagation ();
Event.preventdefault ();
//});

Method Two
$ (' #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>

When you click on the inner, the ' inner ', ' middle ' and ' without ' will pop up in turn. This is the event bubbling.

Intuitively, this is the case, because the innermost area is in the parent node, click on the child node area, is also clicked on the parent node area, so the event will spread.

In fact, a lot of times, we do not want to bubble events, because this will trigger several events at the same time.

Next: We click on innerdouble. She was not bubbling because she called the Stopbubble () method in the method Ialertdouble (), by judging the browser type (ie via canclebubble (), Firefox through Stopprogation () ) to prevent bubbling.

But if it is a link, we will find that she also blocks bubbles, but jumps, which is the default behavior of the browser. You need to use the Preventdefault () method to block. You can view Ialertthree () specifically.

The current mainstream is the use of jquery to bind click events, so it is much simpler.

We can pass the parameter event to the click event and then directly

Event.stoppropagation ();
Event.preventdefault (); No links do not need to add this.

That's it.

The framework is good, but there is a simpler way to return false in an event handler, which is a shorthand for calling both stoppropagation () and Preventdefault () on the event object.
"Detailed code see above, remember to load jquery.js." 】

In fact, you can also add a judgment to each click event:

Copy Code code as follows:

$ (' #id '). Click (Function (event) {
if (event.target==this) {
Do something
}
})

Resolution: Event objects are saved by variable events in an event handler. The Event.target property holds the target element in which the event occurred. This attribute is specified in the DOM API, but is not implemented by all browsers. jquery makes the necessary extensions to this event object to be able to use this property in any browser. With. Target, you can determine the element in the DOM that receives the event first (that is, the element that is actually clicked). Also, we know that this refers to the DOM element that handles the event, so you can write the above code.

However, it is recommended that you use the return False,jquery binding event.