快捷導(dǎo)航

利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event事件處理

更新時(shí)間：2009年12月21日 03:19:26 作者：

做WEB前端開發(fā)的人都知道不同的瀏覽器對(duì)事件的處理方式是有區(qū)別的。

比如得到觸發(fā)事件的元素引用在IE瀏覽器下是：event.srcElement，在FF瀏覽器下則是：event.target，另外又比如在FF瀏覽器下得到光標(biāo)相對(duì)頁面的位置是event.pageX，而IE瀏覽器下的處理方式又是不一樣的，當(dāng)然還有一些像“阻止事件冒泡”以及“取消瀏覽器默認(rèn)行為”等，不同瀏覽器也有不同的處理方式，如果我們要使JavaScript在不同的瀏覽器下能正常處理事件代碼，就要分別進(jìn)行判斷處理?，F(xiàn)在jQuery為我們提供了統(tǒng)一兼容處理函數(shù)$.event.fix(e)，這個(gè)函數(shù)官方并沒有在文檔中說明用法，是我在閱讀框架代碼的時(shí)候發(fā)現(xiàn)可以這樣使用。
一、如何使用
使用jQuery的event兼容處理主要分以下幾個(gè)簡單步驟進(jìn)行：
1、在網(wǎng)頁head區(qū)引用jQuery框架庫文件；
2、定義一個(gè)事件處理方法，在調(diào)用的地方統(tǒng)一傳入event參數(shù)；
3、在事件方法內(nèi)部首先利用$.event.fix把舊的事件轉(zhuǎn)換成新的事件引用；
4、在事件方法后面使用經(jīng)過兼容處理后的事件對(duì)象方法和屬性。
二、使用示例

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event處理</title> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> 
</head> 
<body> 
<input type="button" value="http://wm.fzitv.net" onclick="eventHandler(event)" /> 
<script type="text/javascript"> 
//請(qǐng)使用不同瀏覽器測試本頁，你將看到一樣的結(jié)果 
function eventHandler(e) 
{ 
var event = $.event.fix(e); 
var elem = event.target; 
alert('當(dāng)前點(diǎn)擊對(duì)象的標(biāo)簽名是:' + elem.tagName); 
alert('當(dāng)前點(diǎn)擊按鈕文本是:' + elem.value); 
alert('pageX:' + event.pageX + ',pageY:' + event.pageY); 
//得到按鍵碼 
event.keyCode 
//取消瀏覽器默認(rèn)行為 
event.preventDefault(); 
//取消事件冒泡 
event.stopPropagation(); 
//...還有好些不是很常用屬性，這里不一一列舉 
} 
</script> 
</body> 
</html> 

三、jQuery $.event.fix方法定義原代碼參考

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

 
fix: function(event) 
{ 
if (event[expando] == true) 
return event; 
// store a copy of the original event object 
// and "clone" to set read-only properties 
var originalEvent = event; 
event = 
{ 
originalEvent: originalEvent 
}; 
var props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target timeStamp toElement type view wheelDelta which".split(" "); 
for (var i = props.length; i; i--) 
event[props[i]] = originalEvent[props[i]]; 
// Mark it as fixed 
event[expando] = true; 
// add preventDefault and stopPropagation since 
// they will not work on the clone 
event.preventDefault = function() 
{ 
// if preventDefault exists run it on the original event 
if (originalEvent.preventDefault) 
originalEvent.preventDefault(); 
// otherwise set the returnValue property of the original event to false (IE) 
originalEvent.returnValue = false; 
}; 
event.stopPropagation = function() 
{ 
// if stopPropagation exists run it on the original event 
if (originalEvent.stopPropagation) 
originalEvent.stopPropagation(); 
// otherwise set the cancelBubble property of the original event to true (IE) 
originalEvent.cancelBubble = true; 
}; 
// Fix timeStamp 
event.timeStamp = event.timeStamp || now(); 
// Fix target property, if necessary 
if (!event.target) 
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either 
// check if target is a textnode (safari) 
if (event.target.nodeType == 3) 
event.target = event.target.parentNode; 
// Add relatedTarget, if necessary 
if (!event.relatedTarget && event.fromElement) 
event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement; 
// Calculate pageX/Y if missing and clientX/Y available 
if (event.pageX == null && event.clientX != null) 
{ 
var doc = document.documentElement, body = document.body; 
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc.clientLeft || 0); 
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0); 
} 
// Add which for key events 
if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) 
event.which = event.charCode || event.keyCode; 
// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs) 
if (!event.metaKey && event.ctrlKey) 
event.metaKey = event.ctrlKey; 
// Add which for click: 1 == left; 2 == middle; 3 == right 
// Note: button is not normalized, so don't use it 
if (!event.which && event.button) 
event.which = (event.button & 1 ? 1 : (event.button & 2 ? 3 : (event.button & 4 ? 2 : 0))); 
return event; 
} 