1. window.event
【分析說明】先看一段程式碼
function et()
function et()
{; (event);//IE: [object]
}
以上程式碼在IE運作的結果是[object],而在Firefox無法運作。
因為在IE中event作為window物件的一個屬性可以直接使用,但是在Firefox中卻使用了W3C的模型,它是透過傳參的方法來傳播事件的,也就是說你需要為你的函數提供一個事件響應的介面。
【相容處理】加入對event判斷,依照瀏覽器的差異來得到正確的event:
程式碼如下:
function et() //相容IE和Firefox
alert(evt);
}
2. 鍵盤值的取得
【分析說明】IE和Firefox取得鍵盤值的方法不同,可以理解,Firefox下的event.which與IE下的event.keyCode相當。關於彼此不同,可參考《鍵盤事件中keyCode、which和charCode 的兼容性測試》
【相容處理】
複製程式碼
function myKeyPress(evt){evt = (evt) ?evt : ((window.event) ?window.event : "")
//相容IE和Firefox取得keyBoardEvent物件的鍵值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
//同時按下了Ctrl鍵
//do something;
}
}
3. 事件來源的取得
【分析說明】在使用事件委託的時候,透過事件來源取得來判斷事件到底來自哪個元素,但是,在IE下,event物件有srcElement屬性,但是沒有target屬性;Firefox下,even物件有target屬性,但是沒有srcElement屬性。
【相容處理】
ele=function(evt){ //擷取目前事件作用的物件
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}
?event.srcElement:event.target;);
}
4. 事件監聽
【分析說明】在事件監聽處理方面,IE提供了attachEvent和detachEvent兩個接口,而Firefox提供的是addEventListener和removeEventListener。
【相容處理】最簡單的相容性處理就是封裝這兩套介面:
複製程式碼
程式碼如下:
function addEvent(elem, eventName, handler) {
function addEvent(elem, eventName, handler) {
if (elem.attachEvent) { elem.attachEvent("on" eventName, .call(elem)}); //此處使用回呼函數call(),設this指向elem
} else if (elem.addEventListener) { elem.addEventListener(eventName, handler, false);, . {
if (elem.detachEvent) { elem.detachEvent("on" eventName, function(){
handler.call(elem)}); //此處使用回呼函數call (),讓this指向elem
} else if (elem.removeEventListener) { elem.removeEventListener(eventName, handler, false);
『
需要特別注意,Firefox下,事件處理函數中的this指向被監聽元素本身,而在IE下則不然,可使用回調函數call,讓當前上下文指向監聽的元素。
5. 滑鼠位置
【分析說明】IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,even物件有pageX,pageY屬性,但是沒有x,y屬性。
【相容處理】使用mX(mX = event.x ? event.x : event.pageX;)來取代IE下的event.x或Firefox下的event.pageX。複雜點還要考慮絕對位置。
複製程式碼 程式碼如下:
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x = e.offsetLeft;
y = e.offsetTop;
}
alert("x:" x "," "y:" y);
}