展会信息港展会大全

关于onchange事件在IE和FF火狐浏览器下的兼容问题及解决方法
来源:互联网   发布日期:2016-01-27 15:37:48   浏览:1592次  

导读:本篇文章主要是对关于onchange事件在IE和FF下的表现及解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助在最近做的一个项目中,有这么一个功能点:页面上有一个checkbox,当用户选择或者取消选 ...

本篇文章主要是对关于onchange事件在IE和FF下的表现及解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

在最近做的一个项目中,有这么一个功能点:页面上有一个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(/msies*([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

}

}

赞助本站

人工智能实验室

相关热词: onchange 事件 浏览器 兼容

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港