萬盛學電腦網 >> 腳本專題 >> 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，這便是應用了阻止冒泡事件的特效的效果- 上一頁:js捕獲鼠標滾輪事件代碼
- 下一頁:JS批量操作CSS屬性詳細解析
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved