ie下按keydown事件会触发button

负责公司的一个b2c平台,头部那里有个搜索查询的功能,根据用户输入的内容按回车键也会跳转到响应的页面,后来在ie浏览器下惊奇的发现按回车键的同时它也会触发底部的邮箱订阅的button事件,开始以为是其它的地方用到了回车键从而冲突了,好来发现没有其它地方用到,找了好久都找不到原因,后来百度了一下,找到了相关的问题描述:

说是Button才会有这个问题,如果是a标签呢,我也做了实验,a标签是不会有这样的问题的,只有button会有

那该怎么解决呢?其实解决办法还是挺多的,比如可以把button换掉;我采用的是阻止keydown事件的默认行为preventDefault;的确解决问题。

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


function stopDefault(e) {
//如果提供了事件对象,则这是一个非IE浏览器 
if(e && e.preventDefault) {
//阻止默认浏览器动作(W3C)
e.preventDefault();
} else {
//IE中阻止函数器默认动作的方式 
window.event.returnValue = false; 
}
return false;
}

2.停止事件冒泡


function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if(e && e.stopPropagation) {
//因此它支持W3C的stopPropagation()方法
e.stopPropagation(); 
} else {
//否则,我们需要使用IE的方式来取消事件冒泡 
window.event.cancelBubble = true;
}
return false; 
}

 

具体应用:


<script type="text/javascript">
function 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 false;
}
</script>

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

这样就可以解决ie下面按回车键触发button click()事件了



转载请注明:前端录»ie下按keydown事件会触发button

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=20-34-2"></script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367845.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BZOJ3771 Triple(FFT+容斥原理)

思路比较直观。设A(x)Σxai。先把只选一种的统计进去。然后考虑选两种&#xff0c;这个直接A(x)自己卷起来就好了&#xff0c;要去掉选同一种的情况然后除以2。现在得到了选两种的每种权值的方案数&#xff0c;再把这个卷上A(x)。得到这个后考虑去重&#xff0c;其中重复的就是…

糖豆人维修服务器多长时间,服务器不稳定的《糖豆人》凭啥还这么火?只因做到了这三点...

8月4日&#xff0c;《糖豆人&#xff1a;终极淘汰赛》在steam平台上线&#xff0c;不到一周的时间直接登上steam畅销榜第六位。这款看起来似乎并不具备3A制作级别的游戏&#xff0c;到底是怎么获得了这么多玩家的追捧和青睐的呢&#xff1f;不妨跟着汇智妹一起看看这款游戏到底…

MapReduce算法–了解数据联接第1部分

在本文中&#xff0c;我们继续执行一系列实现算法的系列&#xff0c;该算法在使用MapReduce进行数据密集型文本处理中找到&#xff0c;这一次讨论数据联接。 虽然我们将讨论在Hadoop中联接数据的技术并提供示例代码&#xff0c;但在大多数情况下&#xff0c;您可能不会自己编写…

移动端Web开发小记

之前为公司商旅频道写移动端的页面时遇到不少问题&#xff0c;今特来个总结&#xff0c;希望能为后来者带来一些帮助。 不再考虑浏览器兼容性 移动端开发主要对象是手持设备&#xff0c;其中绝大部分是IOS和Android系统&#xff0c;so&#xff0c;在开发此类页面时不必纠结IE…

虚拟机游戏获取服务器地址,vue获取服务器地址

vue获取服务器地址 内容精选换一换Atlas 500 Pro 智能边缘服务器(型号 3000)安装上架、服务器基础参数配置、安装操作系统等操作请参见《Atlas 500 Pro 智能边缘服务器 用户指南(型号 3000)》&#xff0c;安装操作系统完成后&#xff0c;配置业务网口IP地址&#xff0c;请参见配…

jar各个版本号的意义

jar版本号的意义&#xff1a; Alpha&#xff1a; Alpha是内部测试版,一般不向外部发布,会有很多Bug.除非你也是测试人员,否则不建议使用.是希腊字母的第一位,表示最初级的版本&#xff0c;alpha 就是α&#xff0c;beta 就是β &#xff0c;alpha 版就是比 beta 还早的测试版&a…

mysql用户及权限管理_MySQL 用户及权限管理

1.mysql用户的定义在mysql中&#xff0c;用户由用户名和主机域组成的。1.1 用户名的写法mysql> create user test1localhost;注意&#xff1a;用户名不要以数字、符号开头&#xff0c;如若一定要这么写&#xff0c;给用户名加上引号才能创建用户。1.2 用户中的主机域的写法单…

使用Selenium和HTML中的动态ID进行Java测试

Selenium最酷的方面之一是&#xff0c;您不仅可以使用网站进行录制&#xff0c;还可以将其实际用作junit测试。 首先&#xff0c;我将在Firefox中安装Selenium&#xff08;因为这是正式版本&#xff09;并进行快速测试。 重要的是要注意&#xff0c;Selenium将为您提供多种不同…

题解报告:hdu 1235 统计同成绩学生人数

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid1235 Problem Description 读入N名学生的成绩&#xff0c;将获得某一给定分数的学生人数输出。Input 测试输入包含若干测试用例&#xff0c;每个测试用例的格式为第1行&#xff1a;N第2行&#xff1a;N名学生的…

CSS的计数器:counter-increment与counter-reset

CSS Counters其实就是一计数器&#xff0c;早期在CSS中计数器仅存在于 ul 和 ol 元素。如果要使用在 div 这样的元素上&#xff0c;只能通过 list-style-image 或者是元素的 backgroud-image 来实现。在 CSS2.1的规范 中介绍了一种新技术&#xff0c;允许开发人员使用伪类 :aft…

查看表空间名称、大小、使用大小、剩余大小和使用率

查看表空间名称、大小、使用大小、剩余大小和使用率&#xff1a; SELECT a.tablespace_name "表空间名称", total / (1024 * 1024) "表空间大小(M)", free / (1024 * 1024) "表空间剩余大小(M)", (total - free) / (1024 * 1024 ) "表空…

编译安装PHP-7.2.8

一 下载并软件包 wget http://124.205.69.169/files/A218000006E9730A/cn2.php.net/distributions/php-7.2.8.tar.gz tar xf php-7.2.8.tar.gz cd php-7.2.8 二 安装依赖程序 yum -y install pcre pcre-devel openssl openssl-devel libicu-devel gcc gcc-c autoconf libjpeg l…

常用操作符

2 1. 转换类型数据&#xff0c;可以先定义一个数据&#xff0c;然后在采用调用的方法进行转换。 2. 进行查看相关数据&#xff0c;使用type类型数据进行查看&#xff0c;例如&#xff1a;type(**),然后就可以查到所属的类型了。但是对于单个字符来说&#xff0c;例如红线方…

重要通知,事关校营宝新老用户,敬请知悉!

尊敬的校营宝用户&#xff0c;感谢您选择校营宝培训学校管理系统&#xff0c;我们的发展离不开您的支持鼓励&#xff0c;只要您选择校营宝&#xff0c;就是我们的终身客户&#xff0c;我们承诺给您终身的售后咨询服务&#xff01; 校营宝培训学校管理系统是面向校外艺术类培训…

从条纹边框的实现谈盒子模型

类似下面这个图形&#xff0c;只使用一个标签&#xff0c;可以有多少种实现方式&#xff1a;(不考虑兼容性的情况下) 假设我们的单标签为 div : 定义如下通用 CSS: div{ position:relative; width: 180px; height: 180px; } NO.1 方案一&#xff1a;div上是棕色背景&#xf…

Android_(游戏)打飞机04:绘画敌机、添加子弹

(游戏)打飞机01&#xff1a;前言  传送门 (游戏)打飞机02&#xff1a;游戏背景滚动  传送门 (游戏)打飞机03&#xff1a;控制玩家飞机   传送门 (游戏)打飞机04&#xff1a;绘画敌机、添加子弹   传送门 (游戏)打飞机05&#xff1a;处理子弹&#xff0c;击中敌机&am…

递归问题

第一章递归问题 1.1 河内塔 n个圆盘移动从一个柱子借助一个柱子&#xff0c;移动到另一个柱子上的次数为 &#xff1a; 递推式&#xff1a;T(n)2*T(n-1)1 , n>0,T(0)0 归纳法得出&#xff1a;T(n)pow(2,n)-1 n>0 寻求封闭形式的表达式三个阶段&#xff1a; &#xff08;…

前端工程师的价值体现在哪里?

豆瓣前端: 认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容&#xff0c;解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的&#xff0c;多年使用的语言&#xff0c;作为开放标准…

Python3.6全栈开发实例[005]

5.接收两个数字参数&#xff0c;返回比较大的那个数字。 def compare(a,b):return a if a > b else b # 三元表达式 print(compare(20,100)) 转载于:https://www.cnblogs.com/apollo1616/p/9460493.html

验证码帮助类【CaptchaHelper 】

GDI&#xff1a;Graphics Device Interface Plus也就是图形设备接口,提供了各种丰富的图形图像处理功能;在C#.NET中&#xff0c;使用GDI处理二维&#xff08;2D&#xff09;的图形和图像&#xff0c;使用DirectX处理三维&#xff08;3D&#xff09;的图形图像, 图形图像处理用到…