关于onchange事件在IE和FF下的表现及解决方法


Posted in Javascript onMarch 08, 2014

在最近做的一个项目中,有这么一个功能点:页面上有一个checkbox,当用户选择或者取消选择该checkbox时会向后台发一个jsonp请求。当时的实现是为这个checkbox添加一个onchange事件,但结果却出人意料,为此,我深入的研究了一下,发现了onchange事件在IE和FF下的表现存在着以下问题。

问题①:在FF下,当改变checkbox的选中状态时,会马上触发onchange事件。但在IE下改变checkbox的选中状态时,并不会马上出发onchange事件,而是需要等待checbox失去焦点时该事件才会出发。

为了解决这个问题,我在checkbox的onclick事件里添加了this.blur()这条语句,这是由于onclick事件是在onchange事件之前执行的,因而在Onclick事件中添加this.blur()使checkbox失去焦点便马上会出发onchange事件。可如此一来,又遇到了第二个问题。

问题②:当onclick事件和this.blur同时使用时,在IE下会报错。

在网上查找了一些资料,终于发现了onpropertychange这个事件。该事件在FF下是不会触发的。而在IE下,当checkbox的选择状态改变时马上会出发。于是,得出了最终的解决方案:在IE下,为checkbox绑定onpropertychange事件,而在FF下,为其绑定onchange事件。

具体代码实现如下:

var ua=navigator.userAgent.toLowerCase();
var s=null;
var browser={  
  msie:(s=ua.match(/msie\s*([\d\.]+)/))?s[1]:false,  
  firefox:(s=ua.match(/firefox\/([\d\.]+)/))?s[1]:false,  
  chrome:(s=ua.match(/chrome\/([\d\.]+)/))?s[1]:false,  
  opera:(s=ua.match(/opera.([\d\.]+)/))?s[1]:false,  
  safari:(s=ua.match(/varsion\/([\d\.]+).*safari/))?s[1]:false  
}; 
if(browser.msie){//若为IE浏览器
    checkbox.onpropertychange=function(){
         //do someting
    }
}
else{
    checkbox.onchange=function(){
        //do something
    }
}
Javascript 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
js 图片懒加载的实现
Oct 21 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
javascript中的事件代理初探
Mar 08 #Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 #Javascript
Extjs表单常见验证小结
Mar 07 #Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 #Javascript
禁用JavaScript控制台调试的方法
Mar 07 #Javascript
jquery日历控件实现方法分享
Mar 07 #Javascript
jquery.form.js用法之清空form的方法
Mar 07 #Javascript
You might like
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
3
2006/10/09 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python 实现有道翻译功能
2021/02/26 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
《阳光》教学反思
2014/02/23 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
户外活动总结
2015/02/04 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技