Trigger a certain type of event on an object (such as clicking an onclick event). If this object defines the event handler, this event will call this handler, if the event handler is not defined or the event returns true, the event will be propagated to the parent object of the object, from the inside out until it is processed, it seems so incredible, and I will try again later.
What is JS event bubbling?
Trigger a certain type of event on an object (such as clicking an onclick event). If this object defines the event handler, this event will call this handler, if the event handler is not defined or the event returns true, the event will be propagated to the parent object of the object, from the inside out, until it is processed (all similar events of the parent object will be activated), or it reaches the top level of the object hierarchy, that is, the document Object (Some browsers are windows ).
How to Prevent Jquery event bubbling?
A small example is used to explain
The Code is as follows:
<% @ PageLanguage = "C #" AutoEventWireup = "true" CodeFile = "Default5.aspx. cs" Inherits = "Default5" %>
Porschev --- Jquery event bubbling
Script
For example, the above page,
Divided into three layers: pOne is the outer layer, pTwo middle layer, hr_three is the innermost layer;
They all have their own click events, and the bottom layer a tag also has the href attribute.
On the "run" page, click "click". The "I am the innermost layer", "I am the middle layer", "I am the outermost layer", and then link to Baidu.
This is event bubbling. Originally, I only clicked the tag whose ID is hr_three, but actually executed three alert operations.
Event bubble process (indicated by tag id): hr_three ----> pTwo ----> pOne. From the innermost layer to the outermost layer.
How to block it?
1. event. stopPropagation ();
The Code is as follows:
$ (Function (){
$ ("# Hr_three"). click (function (event ){
Event. stopPropagation ();
});
});
Script
Click "click on me", and the page will pop up: I am the innermost layer, and then link to Baidu
2. returnfalse;
If the following code is added to the header:
The Code is as follows:
$ (Function (){
$ ("# Hr_three"). click (function (event ){
Returnfalse;
});
});
Script
Click "Click me", and the "I am the innermost layer, but the link to the Baidu page is not executed.
From this we can see that:
1. event. stopPropagation ();
During event processing, the event bubble is blocked, but the default behavior is not blocked (it executes the jump of the hyperlink)
2. returnfalse;
During event processing, event bubbling is blocked, and default behavior is also blocked (for example, it did not execute a hyperlink jump just now)
There is also a bubble related:
3. event. preventDefault ();
If you place it in the click Event of the header A tag, click "click me ".
It will pop up one by one: I am the innermost layer ----> I am the middle layer ----> I am the outermost layer, but did not jump to Baidu
Its role is: During event processing, the event is not blocked, but the default behavior is blocked (it only executes all the bullet boxes, but does not execute the hyperlink jump)
