关于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的弹出框插件
Mar 18 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
Bootstrap插件全集
Jul 18 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
React组件之间的通信的实例代码
Jun 27 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
react项目从新建到部署的实现示例
Feb 19 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经典的给图片加水印程序
2006/12/06 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
Python简单生成8位随机密码的方法
2017/05/24 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python 实现音频叠加的示例
2020/10/29 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
行政主管岗位职责
2013/11/18 职场文书
家长对孩子的感言
2014/03/10 职场文书
乔迁之喜主持词
2014/03/27 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
改造DE1103三步曲
2022/04/07 无线电