关于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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
Vue响应式原理详解
Apr 18 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 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
解析ajax事件的调用顺序
2013/06/17 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
Python实现异步IO的示例
2020/11/05 Python
有原因的手表:Flex Watches
2019/03/23 全球购物
质检部职责
2013/12/28 职场文书
优秀村官事迹材料
2014/01/10 职场文书
教师申诉制度
2014/01/29 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
新春联欢会主持词
2014/03/24 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
优质服务标语口号
2015/12/26 职场文书
python办公自动化之excel的操作
2021/05/23 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Go语言并发编程 sync.Once
2021/10/16 Golang
利用Redis实现点赞功能的示例代码
2022/06/28 Redis