时间:2021-05-25
在最近做的一个项目中,有这么一个功能点:页面上有一个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
}
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
关于CSSHACK的文章在jb51.net中提及的也很多。 CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。FF浏览器.test{he
event是ie自带的一个对象,而ff中不存在该对象,只能通过传递参数的方式来模拟event另外ie中使用srcElement去获得事件触发源,ff下使用tar
在IE和FireFox(FF)中js和css的不同css:1.ul标签中FF中有个padding值,却没有margin值,而在IE中正好相反解决办法:将ul的p
但凡用过js中的toFix()方法的,应该都知道这个方法存在一个小小的BUG。在IE下和FF下对于小数的进位有点不同。例如(0.005)在ie下toFix(2)
IE下有onmouseenter和onmouseleave来解决。可惜ff就没有。我再想,为什么这么好的功能,为什么ff不引用呢?还有ie中的onpropert