快捷導(dǎo)航

關(guān)于onchange事件在IE和FF下的表現(xiàn)及解決方法

更新時(shí)間：2014年03月08日 09:48:53 作者：

本篇文章主要是對關(guān)于onchange事件在IE和FF下的表現(xiàn)及解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

在最近做的一個(gè)項(xiàng)目中，有這么一個(gè)功能點(diǎn)：頁面上有一個(gè)checkbox，當(dāng)用戶選擇或者取消選擇該checkbox時(shí)會向后臺發(fā)一個(gè)jsonp請求。當(dāng)時(shí)的實(shí)現(xiàn)是為這個(gè)checkbox添加一個(gè)onchange事件，但結(jié)果卻出人意料，為此，我深入的研究了一下，發(fā)現(xiàn)了onchange事件在IE和FF下的表現(xiàn)存在著以下問題。

問題①：在FF下，當(dāng)改變checkbox的選中狀態(tài)時(shí)，會馬上觸發(fā)onchange事件。但在IE下改變checkbox的選中狀態(tài)時(shí)，并不會馬上出發(fā)onchange事件，而是需要等待checbox失去焦點(diǎn)時(shí)該事件才會出發(fā)。

為了解決這個(gè)問題，我在checkbox的onclick事件里添加了this.blur()這條語句，這是由于onclick事件是在onchange事件之前執(zhí)行的，因而在Onclick事件中添加this.blur()使checkbox失去焦點(diǎn)便馬上會出發(fā)onchange事件。可如此一來，又遇到了第二個(gè)問題。

問題②：當(dāng)onclick事件和this.blur同時(shí)使用時(shí)，在IE下會報(bào)錯(cuò)。

在網(wǎng)上查找了一些資料，終于發(fā)現(xiàn)了onpropertychange這個(gè)事件。該事件在FF下是不會觸發(fā)的。而在IE下，當(dāng)checkbox的選擇狀態(tài)改變時(shí)馬上會出發(fā)。于是，得出了最終的解決方案：在IE下，為checkbox綁定onpropertychange事件，而在FF下，為其綁定onchange事件。

具體代碼實(shí)現(xiàn)如下：

復(fù)制代碼代碼如下:

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
    }
}