关于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 19 Javascript
JavaScript 私有成员分析
Jan 13 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
简单了解JavaScript弹窗实现代码
May 07 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php session安全问题分析
2011/06/24 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
PHP7变量处理机制修改
2021/03/09 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
大学生自我鉴定书
2014/03/24 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
详解JS数组方法
2021/11/20 Javascript