关于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中清空数组的三种方法分享
Apr 07 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
2014过年倒计时示例
2014/01/31 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
2016/08/16 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
谈谈JS中的!!
2017/12/07 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
python 实现端口扫描工具
2020/12/18 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
应届生找工作求职信
2014/06/24 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
初一数学教学反思
2016/02/17 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
Python re.sub 反向引用的实现
2021/07/07 Python
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫