If an element defines event A, such as the Click event, if a bubbling event is not blocked after the event is triggered, the event propagates to the parent element
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: code is as follows: <html> <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); } & nbsp function Stopbubble (e) { var evt = e| | window.event; evt.stoppropagation?evt.stoppropagation ():(evt.cancelbubble=true);/block bubbling } function Stopbubbledouble (e) { var evt = e| | window.event; evt.stoppropagation?evt.stoppropagation ():(evt.cancelbubble=true);/block bubbling Evt.preventdefault ()//prevents browser default behavior so that the link does not jump } $ (function () { //Method one //$ (' #jquerytest '). Click the function (event) { //alert (' Innerfour '); //Event.stoppropagation (); //Event.preventdefault ( ); //}); //Method II   $ (' #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> </html> When you click Inner, it will pop up ' inner ', ' middle ' and ' without ' in turn. This is the event bubbling. from the intuitive point of view, is also 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 don't want event bubbling, because it triggers 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's 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 in the parameter event when clicking the event, then directly event.stoppropagation (); event.preventdefault (); No links do not need to add this. This will be OK. 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." You can also add a judgment to each click event: code as follows: $ (' #id '). Click (Function (Event) { if (event.target==this { //do something } }) Resolution: Event objects are saved by variable events in event handlers. 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. 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
