利用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)行判斷處理。現(xiàn)在jQuery為我們提供了統(tǒng)一兼容處理函數(shù)$.event.fix(e),這個(gè)函數(shù)官方并沒有在文檔中說明用法,是我在閱讀框架代碼的時(shí)候發(fā)現(xiàn)可以這樣使用。
一、如何使用
使用jQuery的event兼容處理主要分以下幾個(gè)簡(jiǎn)單步驟進(jìn)行:
1、在網(wǎng)頁head區(qū)引用jQuery框架庫(kù)文件;
2、定義一個(gè)事件處理方法,在調(diào)用的地方統(tǒng)一傳入event參數(shù);
3、在事件方法內(nèi)部首先利用$.event.fix把舊的事件轉(zhuǎn)換成新的事件引用;
4、在事件方法后面使用經(jīng)過兼容處理后的事件對(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.jb51.net/jslib/jquery/jquery.js"></script>
</head>
<body>
<input type="button" value="http://wwww.dbjr.com.cn" onclick="eventHandler(event)" />
<script type="text/javascript">
//請(qǐng)使用不同瀏覽器測(cè)試本頁,你將看到一樣的結(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(" ");
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;
}
作者:WebFlash
出處:http://webflash.cnblogs.com
一、如何使用
使用jQuery的event兼容處理主要分以下幾個(gè)簡(jiǎn)單步驟進(jìn)行:
1、在網(wǎng)頁head區(qū)引用jQuery框架庫(kù)文件;
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://wwww.dbjr.com.cn" onclick="eventHandler(event)" />
<script type="text/javascript">
//請(qǐng)使用不同瀏覽器測(cè)試本頁,你將看到一樣的結(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;
}
作者:WebFlash
出處:http://webflash.cnblogs.com
您可能感興趣的文章:
- Jquery中Event對(duì)象屬性小結(jié)
- jquery事件preventDefault()方法用法實(shí)例
- jQuery.event兼容各瀏覽器的event詳細(xì)解析
- jquery中event對(duì)象屬性與方法小結(jié)
- JQuery事件e參數(shù)的方法preventDefault()取消默認(rèn)行為
- jquery 關(guān)于event.target使用的幾點(diǎn)說明介紹
- Jquery阻止事件冒泡 event.stopPropagation
- jquery利用event.which方法獲取鍵盤輸入值的代碼
- jquery下為Event handler傳遞動(dòng)態(tài)參數(shù)的代碼
- jQuery源碼分析之Event事件分析
- Jquery替換已存在于element上的event的方法
- jQuery.event.trigger()的簡(jiǎn)單解釋
相關(guān)文章
jquery dialog open后,服務(wù)器端控件失效的快速解決方法
本篇文章是對(duì)jquery dialog open后,服務(wù)器端控件失效的快速解決方法。進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12超棒的響應(yīng)式布局jQuery插件Freetile.js
隨著頁面扁平化的普及,越來越多的網(wǎng)站都開始使用響應(yīng)式布局,作為一個(gè)優(yōu)秀的前端工作者,必須要精通的,這里給大家推薦一款響應(yīng)式布局的jQuery插件。2014-11-11基于jquery的劃詞搜索實(shí)現(xiàn)(備忘)
最近,需要做個(gè)劃詞搜索功能。在網(wǎng)上找了好些,最后,參照進(jìn)行修改,實(shí)現(xiàn)了想要的功能。這里,做個(gè)記錄,以備日后所用。2010-09-09深入理解jquery的$.extend()、$.fn和$.fn.extend()
下面小編就為大家?guī)硪黄钊肜斫鈐query的$.extend()、$.fn和$.fn.extend()。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07jQuery學(xué)習(xí)筆記(1)--用jQuery實(shí)現(xiàn)異步通信(用json傳值)具體思路
這是一個(gè)簡(jiǎn)單的POST 請(qǐng)求功能以取代復(fù)雜 $.ajax,請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù),感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04