萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JS冒泡事件的快速解決方法

JS冒泡事件的快速解決方法

 這篇文章主要是對JS冒泡事件的快速解決方法進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助

何為冒泡事件 就是當設定了多個div的嵌套時;即建立了父子關系,當父div與子div共同加入了onclick事件時,當觸發了子div的onclick事件後,子div進行相應的js操作。但是父div的onclick事件同樣會被觸發。這就造成了事件的多層並發,導致了頁面混亂。這就是冒泡事件。   消除冒泡事件的方法 阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)   下面的一段代碼即可以很好的解釋是麼是冒泡效果,什麼叫消除冒泡效果  代碼如下: <html>  <head>  <title> 阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)</title>  <meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />  <script type="text/javascript">  function doSomething (obj,evt) {  alert(obj.id);  var e=(evt)?evt:window.event; //判斷浏覽器的類型,在基於ie內核的浏覽器中的使用cancelBubble if (window.event) {  e.cancelBubble=true;  } else {  //e.preventDefault(); //在基於firefox內核的浏覽器中支持做法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:orange">  <p>This is child1.</p>  </div>  <p>This is parent1 div.</p>  </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. Will bubble.</p>  </div>  <p>This is parent2 div.</p>  </div>  </body>  </html>   把代碼直接復制後,打開當點擊child1時不僅會彈出 child1 對話框還會彈出 parent1   這就是冒泡事件   但是單擊chile2只會彈出child2卻不會彈出 parent2,這便是應用了阻止冒泡事件的特效的效果  
copyright © 萬盛學電腦網 all rights reserved