关于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 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
javascript中this用法实例详解
Apr 06 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
微信小程序中显示倒计时代码实例
May 09 Javascript
JS实现网站吸顶条
Jan 08 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
javascript实现前端分页效果
Jun 24 Javascript
vue判断按钮是否可以点击
Apr 09 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下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
取得父标签
2006/11/14 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
如何进行Linux分区优化
2013/02/12 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
运动会解说词50字
2014/01/18 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
科技节口号
2014/06/19 职场文书
骨干教师事迹材料
2014/12/17 职场文书
保管员岗位职责
2015/02/14 职场文书
红色经典电影观后感
2015/06/18 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
2019各种承诺书范文
2019/06/24 职场文书
Python实现单例模式的5种方法
2021/06/15 Python