關(guān)于onchange事件在IE和FF下的表現(xiàn)及解決方法
在最近做的一個項目中，有這么一個功能點：頁面上有一個checkbox，當(dāng)用戶選擇或者取消選擇該checkbox時會向后臺發(fā)一個jsonp請求。當(dāng)時的實現(xiàn)是為這個checkbox添加一個onchange事件，但結(jié)果卻出人意料，為此，我深入的研究了一下，發(fā)現(xiàn)了onchange事件在IE和FF下的表現(xiàn)存在著以下問題。
問題①：在FF下，當(dāng)改變checkbox的選中狀態(tài)時，會馬上觸發(fā)onchange事件。但在IE下改變checkbox的選中狀態(tài)時，并不會馬上出發(fā)onchange事件，而是需要等待checbox失去焦點時該事件才會出發(fā)。
為了解決這個問題，我在checkbox的onclick事件里添加了this.blur()這條語句，這是由于onclick事件是在onchange事件之前執(zhí)行的，因而在Onclick事件中添加this.blur()使checkbox失去焦點便馬上會出發(fā)onchange事件?？扇绱艘粊?，又遇到了第二個問題。
問題②：當(dāng)onclick事件和this.blur同時使用時，在IE下會報錯。
在網(wǎng)上查找了一些資料，終于發(fā)現(xiàn)了onpropertychange這個事件。該事件在FF下是不會觸發(fā)的。而在IE下，當(dāng)checkbox的選擇狀態(tài)改變時馬上會出發(fā)。于是，得出了最終的解決方案：在IE下，為checkbox綁定onpropertychange事件，而在FF下，為其綁定onchange事件。
具體代碼實現(xiàn)如下：
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
}
}
相關(guān)文章
這篇文章主要為大家介紹了GoJs中標(biāo)題和縮略圖使用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家詳細介紹了2個簡單js倒計時方式，一是帶天數(shù)的倒計時，二是單純分鐘和秒倒計時，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
js前端身份證號、手機號脫敏、手機號、身份證號加密處理(ios瀏覽器兼容性問題)
這篇文章主要給大家介紹了關(guān)于js前端身份證號、手機號脫敏、手機號、身份證號加密處理的相關(guān)資料,還介紹了ios瀏覽器兼容性問題,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
js + css實現(xiàn)標(biāo)簽內(nèi)容切換功能(實例講解)
下面小編就為大家?guī)硪黄猨s + css實現(xiàn)標(biāo)簽內(nèi)容切換功能(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10![[js+css]點擊隱藏層,點擊另外層不能隱藏原層](http://img.jbzj.com/images/xgimg/bcimg4.png)
[js+css]點擊隱藏層,點擊另外層不能隱藏原層...2007-03-03
利用Node.js創(chuàng)建一個密碼生成器的全步驟
這篇文章主要給大家介紹了關(guān)于如何利用Node.js創(chuàng)建一個密碼生成器的相關(guān)資料,文章將實現(xiàn)的步驟一步步介紹的非常詳細,對大家具有也一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-07-07
javascript檢測瀏覽器精簡版，需要的朋友可以參考下。2010-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖的制作方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
webpack是一個強大的模塊打包工具，在處理依賴、模塊上都很優(yōu)秀，本文從bundle.js文件分析出發(fā)去探索了不同模塊方案的加載機制，初步去理解webpack，并且對webpack3特性進行闡述2017-09-09
echarts折線圖月份數(shù)據(jù)不足自動補0和日期達到數(shù)據(jù)連續(xù)的效果(最新推薦)
這篇文章主要介紹了echarts折線圖月份數(shù)據(jù)不足自動補0和日期達到數(shù)據(jù)連續(xù)的效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03