关于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同步Import,同步调用外部js的方法
Jul 08 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
深入理解angularjs过滤器
May 25 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
Node.js API详解之 zlib模块用法分析
May 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简单选择排序算法实例
2015/01/26 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
jQuery 表格插件整理
2010/04/27 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
vue实现简单图片上传
2020/06/30 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
从python读取sql的实例方法
2020/07/21 Python
python如何爬取网页中的文字
2020/07/28 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
python中二分查找法的实现方法
2020/12/06 Python
python实现ping命令小程序
2020/12/28 Python
个人自荐书
2013/12/20 职场文书
小学母亲节活动方案
2014/03/14 职场文书
气象学专业个人求职信
2014/04/22 职场文书
个人工作保证书
2015/02/28 职场文书
贷款工作证明模板
2015/06/12 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js