Javascript 事件propagation机制
生活随笔
收集整理的這篇文章主要介紹了
Javascript 事件propagation机制
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Created by Jerry Wang, last modified on Oct 10, 2014
測試代碼： <html> <script src="C:\Users\i042416\Desktop\jquery_1.7.1.js"> </script> <script> $(document).ready(function() { ?$("#test").click( function (){ ?alert("four"); ?//return false; ?}); }); function iamtwo(e) { alert("two"); //stopBubble(e); } function iamthree(e) { alert("three"); //stopBubbleDefault(e); } function stopBubble(e) { var evt = e||window.event; evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true ); } function stopBubbleDefault(e) { var evt = e||window.event; evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true ); evt.preventDefault(); } </script> <body> <div οnclick="alert('outermost');">Outermost <div οnclick="alert('middle');"> middle <div οnclick="alert('inner');">inner</div> <div οnclick="iamtwo(event)">two</div> <p><a href="http://www.baidu.com" οnclick="iamthree(event)">three </a></p> <p id="test"><a href="http://www.baidu.com">four</a></p> </div> <!-- end of middle !--> </div> <!-- end of outermost !--> </body> </html> UI上有6個元素: 點擊Outermost: 彈出outermost字樣的alert dialog 點擊middle: 依次彈出middle，outermost的dialog 點擊inner:?依次彈出inner, middle，outermost的dialog 點擊two:?依次彈出two, middle，outermost的dialog 點擊three:?依次彈出three, middle，outermost的dialog， 然后navigate到baidu webpage 點擊four:?依次彈出four, middle，outermost的dialog， 然后navigate到baidu webpage 如果不希望two元素點擊的event 冒泡到其parent hierarchy去，可將click handler iamtwo里的stopBubble行注釋取消，之后點擊就只會出現two dialog: 對于tag a 元素three，如果要阻止瀏覽器navigate到baidu website這一默認行為，需要調用event的preventDefault()方法: 如果是采用jQuery的click方法綁定的事件處理，只需在事件處理函數里返回false即可:要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":
總結
以上是生活随笔為你收集整理的Javascript 事件propagation机制的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 猎魂觉醒法杖选什么系
- 下一篇： 使用Javascript 获得Word