关于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实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
js中null与空字符串""的区别讲解
Jan 17 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 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文件下载处理方法分析
2015/04/22 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python 中的 else详解
2016/04/23 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
UNIX特点都有哪些
2016/04/05 面试题
高中生的自我鉴定范文
2014/01/24 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
房地产项目建议书
2014/03/12 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
领导欢迎词范文
2015/01/26 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python