Description: Prevents events from bubbling onto the DOM tree, which is the event handler on any predecessor element that is not triggered.
Version added:1.0
Event.stoppropagation ()
We can use event.ispropagationstopped () to determine whether this method has been invoked (on that event object).
This method is also valid for trigger ()-defined events.
Note that this does not prevent other event handler functions on the same element from running.
Additional Notes:
Live events are unlikely to stop propagating once the live event has been propagated to the top of the document. Similarly, the. Delegate () event will always propagate to the contained delegate element, and the events on the element will be executed when the delegate event is invoked.
Example:
The bubbling of the click event is extinguished.
Copy Code code as follows:
$ ("P"). Click (Function (event) {
Event.stoppropagation ();
Do something
});
Things are not difficult, mainly to record the blocking event bubbling.
Because the DIV adds a click event, the img inside the div also adds a click event, so when you click IMG, it triggers the Click event on the IMG, triggering the Click event on the Div, which is the event bubbling.
We can easily stop him in jquery.
As follows
Copy Code code as follows:
Event.stoppropagation ();
So click IMG no longer triggers the DIV's Click event.
Copy Code code as follows:
$ (' div '). Click (function () {
var $div = $ (this);
if ($div. FIND (' img '). Size () > 0} {
return;
}else{
$div. css (' backgroundcolor ', ' #e1f0f3 ');
$ (' ').
Appendto ($ (this)). Click (Function (event) {
$div. css (' backgroundcolor ', ' #ffffff ');
$ (this). Remove ();
Event.stoppropagation ();
}). css (' margin-left ', ' 10px ');
}
});
