关于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 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python中的编码知识整理汇总
2016/01/26 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
作风建设年度心得体会
2014/10/29 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Pandas自定义选项option设置
2021/07/25 Python