关于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 相关文章推荐
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
详解JavaScript对象类型
Jun 16 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
JavaScript十大取整方法实例教程
Dec 03 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面向对象全攻略 (七) 继承性
2009/09/30 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php的curl封装类用法实例
2014/11/07 PHP
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
了解重排与重绘
2019/05/29 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
python daemon守护进程实现
2016/08/27 Python
Python反射用法实例简析
2017/12/22 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
python如何实现内容写在图片上
2018/03/23 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
20岁生日感言
2014/01/13 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
《掌声》教学反思
2014/02/23 职场文书
保密承诺书
2014/03/27 职场文书
七一党日活动总结
2014/07/08 职场文书
同学会邀请函模板
2015/01/30 职场文书
政工师工作总结2015
2015/05/26 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python