关于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中打印当前的时间实现思路及代码
Dec 18 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
json传值以及ajax接收详解
May 24 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 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
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
基于matplotlib xticks用法详解
2020/04/16 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Python hashlib模块的使用示例
2020/10/09 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
函授教育个人学习的自我评价
2013/12/31 职场文书
四年级语文教学反思
2014/02/05 职场文书
怎样填写就业意向
2014/04/02 职场文书
大学活动总结模板
2014/07/10 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
大学毕业生个人总结
2015/02/28 职场文书
国富论读书笔记
2015/06/26 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
Python+Tkinter打造签名设计工具
2022/04/01 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技