关于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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
JS画线(实例代码)
Nov 20 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
Vue学习之组件用法实例详解
Jan 06 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循环结构实例讲解
2014/02/10 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
jQuery的animate函数学习记录
2014/08/08 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
Python实现抢购IPhone手机
2018/02/07 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python随机模块random使用方法详解
2020/02/14 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Python实现爬取并分析电商评论
2020/06/19 Python
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
应聘美工求职信
2013/11/07 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
班级课外活动总结
2014/07/09 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
Java实现简易的分词器功能
2021/06/15 Java/Android