1、比如點擊了一個按鈕，這個元素上的事件被觸發(fā)，同時該事件將會傳播到它的所有父級元素中被觸發(fā)。（a->div->body->document->window）這一過程被稱為事件冒泡。事件冒泡是從子級元素到父級元素。js阻止默認(rèn)瀏覽器行為與冒泡行為(2012-07-18 10:19:20) 轉(zhuǎn)載標(biāo)簽： js默認(rèn)行為雜談分類： web前端 在前端開發(fā)工作中，由于瀏覽器兼容性等問題，我們會經(jīng)常用到“停止事件冒泡”和“阻止瀏覽器默認(rèn)行為”。1.阻止瀏覽器的默認(rèn)行為java view plaincopyprint?1. function stopDefault(e) 2. /如果提供

2、了事件對象，則這是一個非IE瀏覽器 3. if(e && e.preventDefault) 4. /阻止默認(rèn)瀏覽器動作(W3C) 5. e.preventDefault(); 6. else 7. /IE中阻止函數(shù)器默認(rèn)動作的方式 8. window.event.returnValue = false; 9. 10. return false; 11. function stopDefault(e) /如果提供了事件對象，則這是一個非IE瀏覽器 if(e && e.preventDefault) /阻止默認(rèn)瀏覽器動作(W3C) e.preventDefault

3、(); else /IE中阻止函數(shù)器默認(rèn)動作的方式 window.event.returnValue = false; return false; 2.停止事件冒泡java view plaincopyprint?1. function stopBubble(e) 2. /如果提供了事件對象，則這是一個非IE瀏覽器 3. if(e && e.stopPropagation) 4. /因此它支持W3C的stopPropagation()方法 5. e.stopPropagation(); 6. else 7. /否則，我們需要使用IE的方式來取消事件冒泡 8. window.ev

4、ent.cancelBubble = true; 9. 10. return false; 11. function stopBubble(e) /如果提供了事件對象，則這是一個非IE瀏覽器 if(e && e.stopPropagation) /因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else /否則，我們需要使用IE的方式來取消事件冒泡 window.event.cancelBubble = true; return false; 具體應(yīng)用實例：寫好的一個項目，今天交給用戶使用，返回了一大堆問題，其中有一個很精典：

5、一個頁面，有一個表單，用來提交表單的按鈕是個button，用jquery來響應(yīng)這個按鈕的點擊動作，通過post提交，供用戶輸入的是一個文本框，用戶輸入完要填的東西之后，直接按回車鍵，就相當(dāng)于按了那個button，剛開始沒注意這個問題，一按回車，就跳轉(zhuǎn)到了另外一個頁面，查了很多資料，才發(fā)現(xiàn)要阻止瀏覽器的默認(rèn)行為，因為SUBMIT的默認(rèn)行為是提交表單，那么你的JS就不會執(zhí)行了。所以先取消默認(rèn)行為。然后執(zhí)行你的JQ來提交。具體的我也說不清楚，只知道若文本框的type="submit",直接點擊按鈕的時候就會跳到另外一個頁面，若type="button",則點擊

6、按鈕的時候不會出現(xiàn)這樣的情況，可按回車鍵的時候會跳到另外一個頁面，解決方法,看下面代碼：jsp代碼：java view plaincopyprint?1. <input type="text" name="appGrpName_s" id="appGrpName_s" onkeydown="enter_down(this.form, event);"/> <input type="text" name="appGrpName_s" id="appG

7、rpName_s" onkeydown="enter_down(this.form, event);"/>js代碼：java view plaincopyprint?1. <script type="text/javascript"> 2. function enter_down(form, event) 3. if(event.keyCode= "13") 4. stopDefault(event); 5. submitForm(form,'actionDiv'); 6. 7. 8. fu

8、nction stopDefault(e) 9. /如果提供了事件對象，則這是一個非IE瀏覽器 10. if(e && e.preventDefault) 11. /阻止默認(rèn)瀏覽器動作(W3C) 12. e.preventDefault(); 13. else 14. /IE中阻止函數(shù)器默認(rèn)動作的方式 15. window.event.returnValue = false; 16. 17. return false; 18. 19. </script> <script type="text/javascript"> function

9、 enter_down(form, event) if(event.keyCode= "13") stopDefault(event); submitForm(form,'actionDiv'); function stopDefault(e) /如果提供了事件對象，則這是一個非IE瀏覽器 if(e && e.preventDefault) /阻止默認(rèn)瀏覽器動作(W3C) e.preventDefault(); else /IE中阻止函數(shù)器默認(rèn)動作的方式 window.event.returnValue = false; return fal

10、se; </script>通過上面的代碼就可以實現(xiàn)按回車的時候相當(dāng)于點擊“提交”按鈕。且上面的代碼兼容IE、FF瀏覽器。有時候遇到需要屏蔽瀏覽器的一些快捷鍵行為時，比如說：ff下按Backspace鍵,會跳到上一個瀏覽器的歷史記錄頁面;注意要在onkeydown事件中調(diào)用stopDefault(event)函數(shù),在onkeyup事件中調(diào)用是不成功的。javascript view plaincopyprint?1. <span style="color: rgb(51, 153, 51);"><</span>a onclick<

11、;span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 204);">"toggleFriendFuncList(event, '6708062', 'he');"</span><span style="color: rgb(51, 153, 51);">></</span>a<span style

12、="color: rgb(51, 153, 51);">></span> <a onclick="toggleFriendFuncList(event, '6708062', 'he');"></a> 由于href是空值，如果不阻止瀏覽器的默認(rèn)行為，產(chǎn)生的效果就是刷新頁面。現(xiàn)在我們需要做的就是阻止href的鏈接事件，而去執(zhí)行onclick事件。老的處理方式：javascript view plaincopyprint?1. <span style="color

13、: rgb(51, 153, 51);"><</span>a onclick<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 204);">"toggleFriendFuncList(event, '6708062', 'he');"</span> href<span style="color: r

14、gb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 204);">"javascript:void(0);"</span><span style="color: rgb(51, 153, 51);">></</span>a<span style="color: rgb(51, 153, 51);">></span> <a onc

15、lick="toggleFriendFuncList(event, '6708062', 'he');" href="javascript:void(0);"></a> jquery的寫法：1）return false ：In event handler ,prevents default behavior and event bubbing 。return false 在事件的處理中，可以阻止默認(rèn)事件和冒泡事件。2）event.preventDefault()：In event handler ,pre

16、vent default event (allows bubbling) 。event.preventDefault()在事件的處理中，可以阻止默認(rèn)事件但是允許冒泡事件的發(fā)生。3）event.stopPropagation()：In event handler ,prevent bubbling (allows default behavior).event.stopPropagation()在事件的處理中，可以阻止冒泡但是允許默認(rèn)事件的發(fā)生prototype的寫法：Event.stop(event)用法介紹：事件發(fā)生后，瀏覽器通常首先觸發(fā)事件發(fā)生元素上的事件處理程序，然后是它的父元素，父元素

17、的父元素依此類推，直到文檔的根元素為止。這被稱為 事件冒泡，是事件傳播的最常見的方式。當(dāng)處理好一個事件后，你可能想要停止事件的傳播，不希望它繼續(xù)冒泡。當(dāng)你的程序有機(jī)會處理事件時，如果這個事件具有 默認(rèn)行為，同時瀏覽器也會處理它。例如，點擊導(dǎo)航鏈接、將表單提交到服務(wù)器、在一個單行文本框中按下回車鍵等等。如果對這些事件你定義了自己的處理方式，可能會非常希望阻止相關(guān)的默認(rèn)行為。但是，有時候還是不能解決相應(yīng)的問題，明明已經(jīng)調(diào)用了阻止瀏覽器默認(rèn)行為的方法，可在按回車的時候還是會調(diào)用默認(rèn)行為，最終也沒有找到問題所在，只好把回車鍵禁用了，實際上是用Tab鍵代替回車鍵。代碼如下:java view plain

18、copyprint?1. <script language="javascript" event="onkeydown" for="document"> 2. /若為回車鍵 3. if ( event.keyCode = 13 ) 4. /改成Tab鍵，這樣每次按回車都起到了Tab的功效,光標(biāo)跳到下一個對象 5. event.keyCode = 9; 6. 7. </script> 8. <script language="javascript" type="text/jav

19、ascript"> 9. /禁用Enter鍵表單自動提交 10. document.onkeydown = function(event) 11. var target, code, tag; 12. if (!event) 13. event = window.event; /針對ie瀏覽器 14. target = event.srcElement; 15. code = event.keyCode; 16. if (code = 13) 17. tag = target.tagName; 18. if (tag = "TEXTAREA") return

20、 true; 19. else return false; 20. 21. 22. else 23. target = event.target; /針對遵循w3c標(biāo)準(zhǔn)的瀏覽器，如Firefox 24. code = event.keyCode; 25. if (code = 13) 26. tag = target.tagName; 27. if (tag = "INPUT") return false; 28. else return true; 29. 30. 31. ; 32. </script> <script language="ja

21、vascript" event="onkeydown" for="document"> /若為回車鍵 if ( event.keyCode = 13 ) /改成Tab鍵，這樣每次按回車都起到了Tab的功效,光標(biāo)跳到下一個對象 event.keyCode = 9; </script> <script language="javascript" type="text/javascript"> /禁用Enter鍵表單自動提交 document.onkeydown = functio

22、n(event) var target, code, tag; if (!event) event = window.event; /針對ie瀏覽器 target = event.srcElement; code = event.keyCode; if (code = 13) tag = target.tagName; if (tag = "TEXTAREA") return true; else return false; else target = event.target; /針對遵循w3c標(biāo)準(zhǔn)的瀏覽器，如Firefox code = event.keyCode; i

23、f (code = 13) tag = target.tagName; if (tag = "INPUT") return false; else return true; ; </script>具體用法試?yán)簀ava view plaincopyprint?1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"> 2. <% page language="java" import="java.util.*" pag

24、eEncoding="UTF-8"%> 3. <% include file="/pages/common/global.jsp"%> 4. <html> 5. <head> 6. <title>高德軟件</title> 7. <meta http-equiv="pragma" content="no-cache"> 8. <meta http-equiv="cache-control" content=&quo

25、t;no-cache"> 9. <meta http-equiv="expires" content="0"> 10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 11. <script> 12. function gotoPage(currentPage,form) 13. goto_Page(currentPage,form,"actionDiv"

26、); 14. 15. function addAppGrp() 16. $("#actionDiv").load("$contextPath /pages/manage/business/add.jsp"); 17. $("#chance_search_div").hide(); 18. 19. function modifyAppGrp(idName) 20. var id=encodeURIComponent(idName); 21. var url = contextName + "/appGrpAction.do?m

27、ethod=addAppGrp&appGrpName="+id; 22. retrieveURL(url,'actionDiv'); 23. $("#chance_search_div").hide(); 24. 25. function savebusiness(thisForm) 26. var name = $("#appGrpName").val(); 27. if(name.trim()="") 28. alert("分組名稱不能為空。"); 29. return; 30

28、. 31. submitForm(thisForm,null,afterSave); 32. return ; 33. 34. function afterSave(content) 35. if(content!=null&&content!="") 36. var arr = content.split(","); 37. if(arr0="true") 38. $("#chance_search_div").show(); 39. /當(dāng)前結(jié)點 40. var itemId = "0:

29、" + $("#appGrpName").val(); 41. /父結(jié)點,因為只有添加根應(yīng)用分組時才會執(zhí)行這個方法，所以父結(jié)點統(tǒng)一為-1 42. var parentId = -1; 43. /當(dāng)前結(jié)點顯示名稱 44. var itemText = $("#appGrpName").val(); 45. /添加新結(jié)點 46. tree.insertNewChild(parentId, itemId, itemText, doOnClick, 'myfolderClosed.gif' ,'myfolderOpen.gif&

30、#39;,'myfolderClosed.gif'); 47. retrieveURL("$contextPath/appGrpAction.do?method=appGrpList","actionDiv"); 48. return; 49. 50. alert(arr1); 51. return; 52. 53. alert("保存失敗"); 54. return; 55. 56. function deleteBusiness(thisForm,idName) 57. if(confirm("確認(rèn)要刪除

31、么？") 58. var id=encodeURIComponent(idName); 59. retrieveURL("$contextPath/appGrpAction.do?method=deleteAppGrp&appGrpName=" + id,null,null,function(content) 60. if(content!=null&&content!="") 61. var arr = content.split(","); 62. if(arr.length=3&&

32、;arr2='y') 63. var msg = "該應(yīng)用組下有應(yīng)用，要強(qiáng)制刪除么？" 64. if(confirm(msg) 65. retrieveURL("$contextPath/appGrpAction.do?method=forceDelAppGrp&appGrpName="+id,null,null,afterForceDel); 66. 67. return; 68. 69. if(arr.length=2) 70. if(arr0="true") 71. /當(dāng)前結(jié)點 72. itemId =

33、"0:" + idName; 73. tree.deleteItem(itemId); 74. retrieveURL("$contextPath/appGrpAction.do?method=appGrpList","actionDiv"); 75. return; 76. 77. alert(arr1); 78. 79. return; 80. 81. alert("刪除失敗"); 82. return; 83. ); 84. return ; 85. 86. 87. function afterForceDe

34、l() 88. if(content!=null&&content!="") 89. var arr = content.split(","); 90. if(arr0="true") 91. monitorTree(); 92. retrieveURL("$contextPath/appGrpAction.do?method=appGrpList","actionDiv"); 93. return; 94. 95. alert(arr1); 96. return; 97. 98

35、. alert("保存失敗"); 99. return; 100. 101. function enter_down(form, event) 102. if(event.keyCode= "13") 103. stopDefault(event); 104. submitForm(form,'actionDiv'); 105. 106. 107. function stopDefault(e) 108. /如果提供了事件對象，則這是一個非IE瀏覽器 109. if(e && e.preventDefault) 110.

36、/阻止默認(rèn)瀏覽器動作(W3C) 111. e.preventDefault(); 112. else 113. /IE中阻止函數(shù)器默認(rèn)動作的方式 114. window.event.returnValue = false; 115. 116. return false; 117. 118. </script> 119. </head> 120. <body> 121. <table style="width: 100%; align: center;"> 122. <tr> 123. <td style="text-align:left;"> 124. <div id="chance_search_div"> 125. <html:form action="appGrpAction.do?method=appGrpList"> 126. <table class="form_t"> 127. <tr> 128. <th cla