JS阻止浏览器默认行为与冒泡行为

1、比如点击了一个按钮，这个元素上的事件被触发，同时该事件将会传播到它的所有父级元素中被触发。（a->div->body->document->window）这一过程被称为事件冒泡。事件冒泡是从子级元素到父级元素。js阻止默认浏览器行为与冒泡行为(2012-07-18 10:19:20) 转载标签： js默认行为杂谈分类： web前端 在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。1.阻止浏览器的默认行为java view plaincopyprint?1. function stopDefault(e) 2. /如果提供

2、了事件对象，则这是一个非IE浏览器 3. if(e && e.preventDefault) 4. /阻止默认浏览器动作(W3C) 5. e.preventDefault(); 6. else 7. /IE中阻止函数器默认动作的方式 8. window.event.returnValue = false; 9. 10. return false; 11. function stopDefault(e) /如果提供了事件对象，则这是一个非IE浏览器 if(e && e.preventDefault) /阻止默认浏览器动作(W3C) e.preventDefault

3、(); else /IE中阻止函数器默认动作的方式 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; 具体应用实例：写好的一个项目，今天交给用户使用，返回了一大堆问题，其中有一个很精典：

5、一个页面，有一个表单，用来提交表单的按钮是个button，用jquery来响应这个按钮的点击动作，通过post提交，供用户输入的是一个文本框，用户输入完要填的东西之后，直接按回车键，就相当于按了那个button，刚开始没注意这个问题，一按回车，就跳转到了另外一个页面，查了很多资料，才发现要阻止浏览器的默认行为，因为SUBMIT的默认行为是提交表单，那么你的JS就不会执行了。所以先取消默认行为。然后执行你的JQ来提交。具体的我也说不清楚，只知道若文本框的type="submit",直接点击按钮的时候就会跳到另外一个页面，若type="button",则点击

6、按钮的时候不会出现这样的情况，可按回车键的时候会跳到另外一个页面，解决方法,看下面代码：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. /阻止默认浏览器动作(W3C) 12. e.preventDefault(); 13. else 14. /IE中阻止函数器默认动作的方式 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) /阻止默认浏览器动作(W3C) e.preventDefault(); else /IE中阻止函数器默认动作的方式 window.event.returnValue = false; return fal

10、se; </script>通过上面的代码就可以实现按回车的时候相当于点击“提交”按钮。且上面的代码兼容IE、FF浏览器。有时候遇到需要屏蔽浏览器的一些快捷键行为时，比如说：ff下按Backspace键,会跳到上一个浏览器的历史记录页面;注意要在onkeydown事件中调用stopDefault(event)函数,在onkeyup事件中调用是不成功的。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是空值，如果不阻止浏览器的默认行为，产生的效果就是刷新页面。现在我们需要做的就是阻止href的链接事件，而去执行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 在事件的处理中，可以阻止默认事件和冒泡事件。2）event.preventDefault()：In event handler ,pre

16、vent default event (allows bubbling) 。event.preventDefault()在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。3）event.stopPropagation()：In event handler ,prevent bubbling (allows default behavior).event.stopPropagation()在事件的处理中，可以阻止冒泡但是允许默认事件的发生prototype的写法：Event.stop(event)用法介绍：事件发生后，浏览器通常首先触发事件发生元素上的事件处理程序，然后是它的父元素，父元素

17、的父元素依此类推，直到文档的根元素为止。这被称为 事件冒泡，是事件传播的最常见的方式。当处理好一个事件后，你可能想要停止事件的传播，不希望它继续冒泡。当你的程序有机会处理事件时，如果这个事件具有 默认行为，同时浏览器也会处理它。例如，点击导航链接、将表单提交到服务器、在一个单行文本框中按下回车键等等。如果对这些事件你定义了自己的处理方式，可能会非常希望阻止相关的默认行为。但是，有时候还是不能解决相应的问题，明明已经调用了阻止浏览器默认行为的方法，可在按回车的时候还是会调用默认行为，最终也没有找到问题所在，只好把回车键禁用了，实际上是用Tab键代替回车键。代码如下:java view plain

18、copyprint?1. <script language="javascript" event="onkeydown" for="document"> 2. /若为回车键 3. if ( event.keyCode = 13 ) 4. /改成Tab键，这样每次按回车都起到了Tab的功效,光标跳到下一个对象 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标准的浏览器，如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的功效,光标跳到下一个对象 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标准的浏览器，如Firefox code = event.keyCode; i

23、f (code = 13) tag = target.tagName; if (tag = "INPUT") return false; else return true; ; </script>具体用法试例：java 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. /当前结点 40. var itemId = "0:

29、" + $("#appGrpName").val(); 41. /父结点,因为只有添加根应用分组时才会执行这个方法，所以父结点统一为-1 42. var parentId = -1; 43. /当前结点显示名称 44. var itemText = $("#appGrpName").val(); 45. /添加新结点 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("确认要删除

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 = "该应用组下有应用，要强制删除么？" 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. /当前结点 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、/阻止默认浏览器动作(W3C) 111. e.preventDefault(); 112. else 113. /IE中阻止函数器默认动作的方式 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