关于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优化技巧(文件瘦身篇)
Jan 28 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
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自定义加密与解密程序实例
2014/12/31 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python小进度条显示代码
2019/03/05 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
使用Python实现牛顿法求极值
2020/02/10 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
用python绘制樱花树
2020/10/09 Python
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
UDP协议功能
2013/01/06 面试题
《毛主席在花山》教学反思
2014/04/20 职场文书
2014年客房部工作总结
2014/11/22 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
电影开国大典观后感
2015/06/04 职场文书