关于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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
jQuery each()小议
Mar 18 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
Javascript如何实现扩充基本类型
Aug 26 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
php格式化日期和时间格式化示例分享
2014/02/24 PHP
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
python多线程方式执行多个bat代码
2016/06/07 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
通过python检测字符串的字母
2020/02/18 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
区域销售经理岗位职责
2013/12/10 职场文书
横店影视城导游词
2015/02/06 职场文书
人工作失职检讨书
2015/05/05 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
出生证明格式
2015/06/15 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书