js阻止浏览器的默认行为以及停止事件冒泡（用JQuery实现回车提交）

浏览数：52 / 时间：2015年06月09日

在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

1.阻止浏览器的默认行为

[java] view plaincopy
  1. function stopDefault(e) {  
  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.     }  

2.停止事件冒泡

[java] view plaincopy
  1. function stopBubble(e) {  
  2.     //如果提供了事件对象，则这是一个非IE浏览器  
  3.     if(e && e.stopPropagation) {  
  4.   　　//因此它支持W3C的stopPropagation()方法  
  5.   　　e.stopPropagation();   
  6.     } else {  
  7.   　　//否则，我们需要使用IE的方式来取消事件冒泡   
  8.   　　window.event.cancelBubble = true;  
  9.     }  
  10.     return false;   
  11. }  

  

具体应用实例：写好的一个项目，今天交给用户使用，返回了一大堆问题，其中有一个很精典：

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

jsp代码：

[java] view plaincopy
  1. <input type="text" name="appGrpName_s" id="appGrpName_s" onkeydown="enter_down(this.form, event);"/>  

 

js代码：

[java] view plaincopy
  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.       
  9.     function stopDefault(e) {  
  10.         //如果提供了事件对象，则这是一个非IE浏览器   
  11.         if(e && e.preventDefault) {  
  12.         　　//阻止默认浏览器动作(W3C)  
  13.         　　e.preventDefault();  
  14.         } else {  
  15.         　　//IE中阻止函数器默认动作的方式   
  16.         　　window.event.returnValue = false;   
  17.         }  
  18.         return false;  
  19.     }  
  20. </script>  

通过上面的代码就可以实现按回车的时候相当于点击“提交”按钮。且上面的代码兼容IE、FF浏览器。

 

有时候遇到需要屏蔽浏览器的一些快捷键行为时，比如说：ff下按Backspace键,会跳到上一个浏览器的历史记录页面;

注意要在onkeydown事件中调用stopDefault(event)函数,在onkeyup事件中调用是不成功的。

 

 

[javascript] view plaincopy
  1. <span style="color:#339933"><</span>a onclick<span style="color:#339933">=</span><span style="color:#3366cc">"toggleFriendFuncList(event, ‘6708062‘, ‘he‘);"</span><span style="color:#339933">></</span>a<span style="color:#339933">></span>  

由于href是空值，如果不阻止浏览器的默认行为，产生的效果就是刷新页面。 现在我们需要做的就是阻止href的链接事件，而去执行onclick事件。 老的处理方式：

[javascript] view plaincopy
  1. <span style="color:#339933"><</span>a onclick<span style="color:#339933">=</span><span style="color:#3366cc">"toggleFriendFuncList(event, ‘6708062‘, ‘he‘);"</span> href<span style="color:#339933">=</span><span style="color:#3366cc">"javascript:void(0);"</span><span style="color:#339933">></</span>a<span style="color:#339933">></span>  

 

 

jquery的写法： 1）return false ：In event handler ,prevents default behavior and event bubbing 。 return false 在事件的处理中，可以阻止默认事件和冒泡事件。 2）event.preventDefault()：In event handler ,prevent default event (allows bubbling) 。 event.preventDefault()在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。 3）event.stopPropagation()：In event handler ,prevent bubbling (allows default behavior). event.stopPropagation()在事件的处理中，可以阻止冒泡但是允许默认事件的发生

prototype的写法： Event.stop(event) 用法介绍： 事件发生后，浏览器通常首先触发事件发生元素上的事件处理程序，然后是它的父元素，父元素的父元素……依此类推， 直到文档的根元素为止。这被称为 事件冒泡，是事件传播的最常见的方式。当处理好一个事件后， 你可能想要停止事件的传播，不希望它继续冒泡。 当你的程序有机会处理事件时，如果这个事件具有 默认行为，同时浏览器也会处理它。例如，点击导航链接、 将表单提交到服务器、在一个单行文本框中按下回车键等等。如果对这些事件你定义了自己的处理方式， 可能会非常希望阻止相关的默认行为。

 

 

但是，有时候还是不能解决相应的问题，明明已经调用了阻止浏览器默认行为的方法，可在按回车的时候还是会调用默认行为，最终也没有找到问题所在，只好把回车键禁用了，实际上是用Tab键代替回车键。代码如下:

[java] view plaincopy
  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.   
  9. <script language="javascript" type="text/javascript">   
  10.   //禁用Enter键表单自动提交    
  11.       document.onkeydown = function(event) {    
  12.           var target, code, tag;    
  13.         if (!event) {    
  14.             event = window.event; //针对ie浏览器    
  15.             target = event.srcElement;    
  16.             code = event.keyCode;    
  17.             if (code == 13) {    
  18.                  tag = target.tagName;    
  19.                  if (tag == "TEXTAREA") { return true; }    
  20.                  else { return false; }    
  21.              }    
  22.          }    
  23.          else {    
  24.              target = event.target; //针对遵循w3c标准的浏览器，如Firefox    
  25.              code = event.keyCode;    
  26.             if (code == 13) {    
  27.                  tag = target.tagName;    
  28.                  if (tag == "INPUT") { return false; }    
  29.                  else { return true; }     
  30.             }    
  31.        }    
  32.      };    
  33. </script>  

具体用法试例：

[java] view plaincopy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <%@ page language="java" import="java.util.*" pageEncoding="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="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");  
  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?method=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.         }  
  31.         submitForm(thisForm,null,afterSave);  
  32.         return ;  
  33.     }  
  34.     function afterSave(content){  
  35.         if(content!=null&&content!=""){  
  36.             var arr = content.split(",");  
  37.             if(arr[0]=="true"){  
  38.                 $("#chance_search_div").show();  
  39.                 //当前结点  
  40.                 var itemId = "0::" + $("#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‘,‘myfolderClosed.gif‘);  
  47.                 retrieveURL("${contextPath}/appGrpAction.do?method=appGrpList","actionDiv");  
  48.                 return;  
  49.             }  
  50.             alert(arr[1]);  
  51.             return;  
  52.         }  
  53.         alert("保存失败");  
  54.         return;  
  55.     }  
  56.     function deleteBusiness(thisForm,idName){  
  57.         if(confirm("确认要删除么？")){  
  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&&arr[2]==‘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(arr[0]=="true"){  
  71.                             //当前结点  
  72.                             itemId = "0::" + idName;  
  73.                             tree.deleteItem(itemId);  
  74.                             retrieveURL("${contextPath}/appGrpAction.do?method=appGrpList","actionDiv");  
  75.                             return;  
  76.                         }  
  77.                         alert(arr[1]);  
  78.                     }  
  79.                     return;  
  80.                 }  
  81.                 alert("删除失败");  
  82.                 return;  
  83.             });  
  84.             return ;  
  85.         }  
  86.     }  
  87.     function afterForceDel(){  
  88.         if(content!=null&&content!=""){  
  89.             var arr = content.split(",");  
  90.             if(arr[0]=="true"){  
  91.                 monitorTree();  
  92.                 retrieveURL("${contextPath}/appGrpAction.do?method=appGrpList","actionDiv");  
  93.                 return;  
  94.             }  
  95.             alert(arr[1]);  
  96.             return;  
  97.         }  
  98.         alert("保存失败");  
  99.         return;  
  100.     }  
  101.       
  102.       
  103.     function enter_down(form, event) {   
  104.       if(event.keyCode== "13") {  
  105.           stopDefault(event);  
  106.           submitForm(form,‘actionDiv‘);  
  107.       }  
  108.     }  
  109.       
  110.     function stopDefault(e) {  
  111.         //如果提供了事件对象，则这是一个非IE浏览器   
  112.         if(e && e.preventDefault) {  
  113.         　　//阻止默认浏览器动作(W3C)  
  114.         　　e.preventDefault();  
  115.         } else {  
  116.         　　//IE中阻止函数器默认动作的方式   
  117.         　　window.event.returnValue = false;   
  118.         }  
  119.         return false;  
  120.     }  
  121. </script>  
  122. </head>  
  123. <body>  
  124.     <table style="width: 100%; align: center;">  
  125.         <tr>  
  126.             <td style="text-align:left;">  
  127.                 <div id="chance_search_div">  
  128.                 <html:form action="appGrpAction.do?method=appGrpList">  
  129.                 <table class="form_t">  
  130.                     <tr>  
  131.                         <th class="tablelogo">    查询  
  132.                             <input type="hidden" name="hidden_s" value="1" />  
  133.                         </th>  
  134.                     </tr>  
  135.                     <tr>  
  136.                         <td style="text-align: left; padding-left: 50px;">  
  137.                             <br />  
  138.                             名称   
  139.                             <input type="text" name="appGrpName_s" id="appGrpName_s"  
  140.                                         onblur="javascript:isSpecialChar(this);" onkeydown="enter_down(this.form, event);"/>  
  141.                                                    
  142.                             <input type="button" class="button4C" value="查 询"  
  143.                                             onclick="javascript:submitForm(this.form,‘actionDiv‘);" />    
  144.                             <input type="button" value="添  加" class="button4C" onclick="javascript:addAppGrp();"/>  
  145.           
  146.                             <br />   
  147.                         </td>  
  148.                     </tr>  
  149.                  </table>  
  150.                 </html:form>  
  151.                   
  152.                 </div>  
  153.                 <div id="actionDiv"></div>  
  154.             </td>  
  155.         </tr>  
  156.     </table>  
  157.     <script><!--  
  158.         $("#actionDiv").load("${contextPath }/appGrpAction.do?method=appGrpList&random=" + Math.random());  
  159.     --></script>     
  160. </body>  
  161. </html>  

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 java src html 使用 问题 com class style 代码 java src html 使用 问题 com

相关文章

随机文章

您可能还喜欢

您可能还喜欢