关于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 相关文章推荐
javascript将相对路径转绝对路径示例
Mar 14 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
jquery 手势密码插件
Mar 17 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
JS函数参数的传递与同名参数实例分析
Mar 16 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
python编写猜数字小游戏
2019/10/06 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
我爱幼儿园演讲稿
2014/09/11 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
体育委员竞选稿
2015/11/21 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
python manim实现排序算法动画示例
2022/08/14 Python