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

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

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

[java] 

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 plain copy

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] 

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

 

js代码：

[java] 

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事件中调用是不成功的。

来源：oschina

链接：https://my.oschina.net/u/568630/blog/66816