关于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中String的常用方法实例分析
Jun 13 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
Vue动态组件实例解析
Aug 20 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 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批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
Web程序工作原理详解
2014/12/25 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
jquery trim() 功能源代码
2011/02/14 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
Python类反射机制使用实例解析
2019/12/30 Python
上海期货面试题
2014/01/31 面试题
酒店应聘自荐信
2013/11/09 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
教堂婚礼主持词
2014/03/14 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
小学生读书活动总结
2014/06/30 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
建筑工程催款函
2015/06/24 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
浅析Python实现DFA算法
2021/06/26 Python