关于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 null,undefined,字符串小结
Aug 21 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jQuery对val和atrr("value")赋值的区别介绍
Sep 26 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 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爆绝对路径方法收集整理
2012/09/17 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
python中requests模块的使用方法
2015/04/08 Python
python写入文件自动换行问题的方法
2019/07/05 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
用python发送微信消息
2020/12/21 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
如何在Shell脚本中使用函数
2015/09/06 面试题
教师自荐信范文
2013/12/09 职场文书
建筑施工安全责任书
2014/07/24 职场文书
催款函怎么写
2015/06/24 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js