What is JS event bubbling?
Triggers a class of events (such as clicking the OnClick event) on an object. If this object defines a handler for this event, this event invokes the handler, and if no such event handler is defined or the event returns true, the event propagates to the object's parent object, from the inside to the outside, Until it is processed (all similar events of the parent object will be activated), or it reaches the topmost level of the object hierarchy, which is the document object (some browsers are windows).
How do I prevent jquery events from bubbling?
By a small example to explain
Copy Code code as follows:
<% @PageLanguage = "C #" autoeventwireup= "true" codefile= "Default5.aspx.cs" inherits= "DEFAULT5"%>
<! Doctypehtmlpublic "-//w3c//dtdxhtml1.0transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>porschev---jquery event bubbling </title>
<scriptsrc= "Jquery-1.3.2-vsdoc.js" type= "Text/javascript" ></script>
<body>
<formid= "Form1" runat= "Server" >
<divid= "Divone" onclick= "alert (' I am the outermost ');" >
<divid= "Divtwo" onclick= "alert (' I am an intermediary! ') ' >
<aid= "Hr_three" href= "http://www.baidu.com" mce_href= "http://www.baidu.com" alert (' I am the innermost! ') > Click me </a>
</div>
</div>
</form>
</body>
Like the page above,
Divided into three layers: Divone is the outer layer, divtwo middle layer, hr_three is the innermost layer;
They all have their own click events, the innermost a tag and the href attribute.
Run the page, click "Click Me", will pop up: I am the innermost----> I am the middle tier----> I am the outermost----> then link to Baidu.
This is event bubbling, and I just clicked on the tag with ID Hr_three, but I did three alert operations.
Event bubbling process (indicated by tag ID): hr_three---->divtwo---->divone. Bubbling from the innermost layer to the outermost.
How to stop it?
1.event.stoppropagation ();
Copy Code code as follows:
<scripttype= "Text/javascript" >
$ (function () {
$ ("#hr_three"). Click (Function (event) {
Event.stoppropagation ();
});
});
<script>
Click "Click Me" again, will pop up: I am the innermost layer, then link to Baidu
2.returnfalse;
If the head is joined by the following code
Copy Code code as follows:
<scripttype= "Text/javascript" >
$ (function () {
$ ("#hr_three"). Click (Function (event) {
Returnfalse;
});
});
<script>
Click "Click Me" again, will pop up: I am the innermost, but will not carry out link to Baidu page
From This we can see：
1.event.stoppropagation ();
Event bubbling is prevented during event handling, but the default behavior is not blocked (it performs a hyperlink jump)
2.returnfalse;
Event handling prevents event bubbling and the default behavior (for example, it did not perform a hyperlink jump)
There is also a bubbling-related:
3.event.preventdefault ();
If you put it in the Header a tab click event, click "Click Me".
You'll find that it pops up: I am the innermost----> I am the middle tier----> I am the outermost, but finally did not jump to Baidu
Its role is: event processing, not blocking event bubbling, but sniper default behavior (it only executes all frame, but does not perform hyperlink jump)
