关于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 相关文章推荐
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
Jul 06 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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 已经成熟
2006/12/04 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP单链表的实现代码
2016/07/05 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python之reload流程实例代码解析
2018/01/29 Python
从python读取sql的实例方法
2020/07/21 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
体育教育专业自荐信范文
2013/12/20 职场文书
社团成立邀请函
2014/01/08 职场文书
结婚典礼证婚词
2014/01/11 职场文书
大学校运会广播稿
2014/02/03 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
公务员年度个人总结
2015/02/12 职场文书
医院病假条范文
2015/08/17 职场文书
优质护理心得体会
2016/01/22 职场文书
Redis性能监控的实现
2021/07/09 Redis
Python获取字典中某个key的value
2022/04/13 Python