e.stoppropagation () blocks event bubbling
The code is as follows: <head> <title></title> <script src= "Scripts/jquery-1.4.1.js" type= text/ JavaScript "></script> </head> <body> <table> <tr> <td><span> bubbling event test </span></td> </tr> </table> </body> Let's look at this code first: code as follows: <script type= "Text/javascript" > $ (function () { $ ("table"). Click ( function () {Alert ("table Alert");}); $ ("TD"). Click (function () {alert ("TD alert"); $ ("span"). Click (function () { alert ("span alert"); }); }); </script> We will see the situation: Span alert-> TD Alert-> Table alert. This is called event bubbling. From bottom to top, from inside to outside, events are triggered sequentially. The conditions that can be triggered in turn are multiple nested tags that have the same event, and the tangent event synchronously occurs and the response of the same event is implemented from the inside out. Sometimes we don't want events bubbling? Code as follows: <script type= "Text/javascript" > $ (function () { $ ("table"). Click (function () {alert (" Table Alert "); }); $ ("TD"). Click (function () { Alert ("TD alert"); }); $ ("span"). Click (function (e) { alert ("span alert"); e.stoppropagation (); }); }); </script> When I implement the Click event for the entire document, you can block event bubbling for text boxes and Drop-down boxes so that you click on them without causing the document to trigger events. If you want to obtain event-related information, you must add an E object to the knowledge method, and E is the event object. E.preventdefault () to block event default behavior. Code as follows: $ ("a"). Click (function (e) { alert ("Default behavior is prohibited)"; E.preventdefault (); }); <a href= "Http://www.baidu.com" > Test </a> return false is equivalent to calling both E.preventdefault () and E.stoppropagation () Return false prevents event bubbling, in addition to blocking the default behavior. If you have a jquery source code in hand, you can view the following code: code as follows: if (Ret===false) { Event.preventdefault (); Event.stoppropagation (); } Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
