关于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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 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实现递归循环每一个目录
2010/08/08 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
document.documentElement && document.documentElement.scrollTop
2007/12/01 Javascript
jquery 学习笔记一
2010/04/07 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
获取Django项目的全部url方法详解
2017/10/26 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
安全员岗位职责
2013/11/11 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
装修设计师求职信
2014/02/26 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python