A fast solution to JS bubbling events

Source: Internet
Author: User

  This article is mainly on the JS bubbling event of a quick solution to the detailed analysis of the introduction, the need for friends can come to the reference, I hope to help you.

What bubble event is when multiple div nesting is set up, that is, the establishment of a parent-child relationship, when the parent Div and the child Div joined the onclick event, when the child div triggered the onclick event, the child div for the corresponding JS operation. But the OnClick event of the parent Div is also triggered. This causes the multiple layers of the event to be concurrent, resulting in page clutter. This is the bubbling event.   Elimination of bubbling events Prevent JavaScript event bubbling (cancelbubble, stoppropagation)   The following code is a good explanation for bubble effect, what is called elimination of bubbling effect   The code is as follows: <html>  <head>  <title> prevent JavaScript event bubbling (cancelbubble, stoppropagation) </ title>  <meta name= "keywords" content= "JavaScript, event bubbling, cancelbubble,stoppropagation"/>  < Script type= "Text/javascript" >  function dosomething (obj,evt) {  alert (obj.id);  var e= (evt)? EVT: window.event; To determine the type of browser, use the cancelbubble if (window.event) {  e.cancelbubble=true; } in a browser based on IE kernel or else { // E.preventdefault (); Support practices in Firefox kernel based browsers stoppropagation e.stoppropagation (); } }  </script>  </head >  <body>  <div id= "parent1" onclick= "alert (this.id)" style= "Width:250px;background-color: Yellow ">  <p>this Is parent1 div.</p>  <div id= "child1" onclick= "alert (this.id)" style= "Width:200px;background-color:o Range ' >  <p>this is child1.</p>  </div>  <p>this is parent1 div.</p>& nbsp </div>  <br/>  <div id= "Parent2" onclick= "alert (this.id)" style= "width:250px; Background-color:cyan; " >  <p>this is parent2 div.</p>  <div id= "child2" onclick= "dosomething (this,event);" Style= "Width:200px;background-color:lightblue;" >  <p>this is child2. Would bubble.</p>  </div>  <p>this is parent2 div.</p>  </div>  </ body>  </html>   When you copy the code directly, open the Child1 dialog box will pop up when you click on the Child1 and the parent1   This is the bubbling event   But clicking Chile2 only pops up the child2 but does not eject the Parent2, which is the effect that prevents the bubbling event from being applied  
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.