首页 > web前端 > js教程 > 关于onchange事件在IE和FF下的表现及解决方法_javascript技巧

关于onchange事件在IE和FF下的表现及解决方法_javascript技巧

WBOY
发布: 2016-05-16 16:56:21
原创
1191 人浏览过

在最近做的一个项目中,有这么一个功能点:页面上有一个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
    }
}
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板