利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event事件處理
2024-05-06 14:12:15
供稿：網(wǎng)友
比如得到觸發(fā)事件的元素引用在IE瀏覽器下是：event.srcElement，在FF瀏覽器下則是：event.target，另外又比如在FF瀏覽器下得到光標(biāo)相對(duì)頁(yè)面的位置是event.pageX，而IE瀏覽器下的處理方式又是不一樣的，當(dāng)然還有一些像“阻止事件冒泡”以及“取消瀏覽器默認(rèn)行為”等，不同瀏覽器也有不同的處理方式，如果我們要使JavaScript在不同的瀏覽器下能正常處理事件代碼，就要分別進(jìn)行判斷處理。現(xiàn)在jQuery為我們提供了統(tǒng)一兼容處理函數(shù)$.event.fix(e)，這個(gè)函數(shù)官方并沒(méi)有在文檔中說(shuō)明用法，是我在閱讀框架代碼的時(shí)候發(fā)現(xiàn)可以這樣使用。
一、如何使用
使用jQuery的event兼容處理主要分以下幾個(gè)簡(jiǎn)單步驟進(jìn)行：
1、在網(wǎng)頁(yè)head區(qū)引用jQuery框架庫(kù)文件；
2、定義一個(gè)事件處理方法，在調(diào)用的地方統(tǒng)一傳入event參數(shù)；
3、在事件方法內(nèi)部首先利用$.event.fix把舊的事件轉(zhuǎn)換成新的事件引用；
4、在事件方法后面使用經(jīng)過(guò)兼容處理后的事件對(duì)象方法和屬性。
二、使用示例
代碼如下:
<!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.Vevb.com/jslib/jquery/jquery.js"></script>
</head>
<body>
<input type="button" value="http://wm.survivalescaperooms.com" onclick="eventHandler(event)" />
<script type="text/javascript">
//請(qǐng)使用不同瀏覽器測(cè)試本頁(yè)，你將看到一樣的結(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方法定義原代碼參考
代碼如下:
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(" ");
