关于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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
微信小程序实现聊天室
Aug 21 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
原生JS实现分页
Apr 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
Terran兵种介绍
2020/03/14 星际争霸
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
简单了解Python中的几种函数
2017/11/03 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python利用tkinter实现屏保
2019/07/30 Python
python字典按照value排序方法
2020/12/28 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
什么是封装
2013/03/26 面试题
小学一年级学生评语大全
2014/12/25 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL