关于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 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
基于JavaScript实现年月日三级联动
Jun 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
js中的string.format函数代码
2020/08/11 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
Highcharts入门之简介
2016/08/02 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python基于socket实现网络广播的方法
2015/04/29 Python
理解Python中的With语句
2016/03/18 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
行政管理专业推荐信
2013/11/02 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
幼儿园大班教学反思
2016/03/02 职场文书