文档章节

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

java_T
 java_T
发布于 2012/07/13 12:04
字数 667
阅读 1428
收藏 2
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

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

本文转载自:http://blog.csdn.net/shanliangliuxing/article/details/7091886

java_T

java_T

粉丝 34
博文 73
码字总数 13320
作品 0
深圳
高级程序员
私信 提问
JQuery DOM 事件冒泡

什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。...

尐桀
2012/08/20
260
0
总结jquery使用事件(复合事件、事件绑定等)

本文整理总结jquery事件,在使用jquery开发中,一定会使用到事件,下面是常用的事件。 1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种...

^6^|^6^
2011/12/09
430
0
JavaScript事件机制——记一次认真准备的技术分享

先问几个问题,你是否能快速闪过答案? 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 捕获型和冒泡型同时存在,谁生效? jquery的on或bind是冒泡,还是捕获? 冒泡能够阻止,那...

闲淡超人
2018/06/20
0
0
阻止事件冒泡和浏览器的默认行为

javascript 1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) //因此它支持W3C的stopPropaga...

JellyFlower
2014/06/27
550
0
jQuery事件处理: 别再乱用“return false”了

可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码: view plaincopy to clipboardprint? $("a.toggle").cl...

索隆
2012/09/18
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

浅谈FlyWeight享元模式

一、前言 享元(FlyWeight)模式顾名思义,即是轻量级,原因就是享元,共享元素,这里的元素指的是对象。如何共享对象,那就是在检测对象产生的时候,如果产生的是同一个对象,那么直接使用已...

青衣霓裳
3分钟前
2
0
Python学习10.14:Python set集合详解

Python 中的集合,和数学中的集合概念一样,用来保存不重复的元素,即集合中的元素都是唯一的,互不相同。 从形式上看,和字典类似,Python 集合会将所有元素放在一对大括号 {} 中,相邻元素...

太空堡垒185
4分钟前
2
0
好程序员大数据教程分享Scala系列之文件以及正则表达式

好程序员大数据教程分享Scala系列之文件以及正则表达式 1 读取行 导入scala.io.Source后,即可引用Source中的方法读取文件信息。 import scala.io.Source object FileDemo extends App{ val ...

好程序员官网
4分钟前
2
0
75.nosql memcached与安装及查看状态

21.1 nosql介绍 21.2 memrcached介绍 21.3 安装memcached 21.4 查看memcachedq状态 21.1 nosql介绍 什么是NoSQL: 1.非关系型数据库就是NoSQL,关系型数据库代表MySQL 也是一种数据库,来存储...

oschina130111
6分钟前
1
0
玩转阿里云 Terraform(二):Terraform 的几个关键概念

上一篇《玩转阿里云Terraform(一):Terraform 是什么》介绍了 Terraform 的基本定义和特点之后,本文将着重介绍几个Terraform中的关键概念。 Terraform 关键概念 在使用Terraform的过程中,通...

阿里云官方博客
6分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部