たとえば、イベントをトリガーする要素参照は、IE ブラウザではevent.srcElement、FF ブラウザではevent.target です。また、FF ブラウザでは、ページに対するカーソルの位置は、event.pageX であり、処理は次のようになります。もちろん、IE ブラウザでの JavaScript の処理方法もブラウザごとに異なります。コードはブラウザ上で通常どおり処理できますが、個別に判断して処理する必要があります。現在、jQuery は統合互換処理関数 $.event.fix(e) を提供していますが、この関数はドキュメント内でその使用方法が公式に説明されていません。フレームワークのコードを読むと、このように使用できることがわかりました。
1. 使い方
jQuery のイベント互換処理は主に以下の簡単な手順に分かれます。
1. Web ページのヘッド領域で jQuery フレームワークのライブラリ ファイルを参照します。 2. イベント処理メソッドを定義し、呼び出し場所でイベント パラメータを均一に渡します。
3. まず、イベント メソッド内で $.event.fix を使用して、古いイベントを新しいイベント参照に変換します。 . 互換性を持たせたイベントメソッドの後に使用します。 イベントオブジェクトのメソッドとプロパティを処理します。
2. 使用例
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns=" http://www.w3.org/1999/xhtml">
jQuery の $.event.fix 関数を使用してブラウザ イベント処理を統合する
< ;/html>
3. jQuery $.event.fix メソッド定義のオリジナルコードリファレンス
>
コードをコピー
コードは次のとおりです:
修正: function(event)
{
if (event[expando] == true)
イベントを返す;
// 元のイベント オブジェクトのコピーを保存します
// 読み取り専用プロパティを設定するために「クローン」を作成します
varoriginalEvent =event;
イベント =
{
オリジナルイベント: オリジナルイベント
};
var props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget datadetaileventPhase fromElement handler keyCode metaKey newValueoriginalTarget pageX pageY prevValue relationshipNode relationshipTarget screenX screenY SHIFTKey srcElement target timeStamp toElement type view WheelDelta where".split(" ") ;
for (var i = props.length; i; i--)
event[props[i]] = OriginalEvent[props[i]];
// 固定としてマークします
event[expando] = true;
//PreventDefault と stopPropagation を追加します。
// クローンでは機能しません。
event.preventDefault = function()
{
//PreventDefault が存在する場合は、元のイベントで実行します。
if (originalEvent.preventDefault)
originalEvent.preventDefault();
// それ以外の場合は、元のイベントの returnValue プロパティを false に設定します (IE)
originalEvent.returnValue = false;
};
event.stopPropagation = function()
{
// stopPropagation が存在する場合は元のイベントで実行します
if (originalEvent.stopPropagation)
originalEvent.stopPropagation();
// それ以外の場合は、元のイベントの cancelBubble プロパティを true に設定します (IE)
originalEvent.cancelBubble = true;
};
// タイムスタンプを修正
event.timeStamp =event.timeStamp ||今();
// 必要に応じて、ターゲット プロパティを修正します。
if (!event.target)
event.target =event.srcElement ||書類; // srcElement が定義されていない可能性がある #1925 を修正
// ターゲットがテキストノード (safari) かどうかを確認
if (event.target.nodeType == 3)
event.target =event.target .parentNode;
// 必要に応じて、relativeTarget を追加します。
if (!event.popularTarget &&event.fromElement)
event.popularTarget =event.fromElement ==event.target ?イベント.toElement : イベント.fromElement;
// 見つからない場合は pageX/Y を計算し、clientX/Y が利用可能な場合は
if (event.pageX == null &&event.clientX != null)
{
var doc = document.documentElement, body = ドキュメント.ボディ;
event.pageX = events.clientX (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc.clientLeft || 0);
event.pageY = events.clientY (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0);
}
// キーイベントのどれを追加します
if (!event.that && ((event.charCode ||event.charCode === 0) ?event.charCode :event.keyCode))
event.that =event.charCode ||イベント.キーコード;
// Mac 以外のブラウザにメタキーを追加します (PC の場合は Ctrl、Mac の場合は Meta を使用します)
if (!event.metaKey &&event.ctrlKey)
event.metaKey =event.ctrlKey;
// クリック用に追加: 1 == left; 2 == 中間; 3 == right
// 注: ボタンは正規化されていないため、使用しないでください
if (!event.that &&event.button)
event.that = (event.button & 1 ? 1 : (イベント.ボタン & 2 ? 3 : (イベント.ボタン & 4 ? 2 : 0)));
リターンイベント;
}
作者:WebFlash
出处:http://webflash.cnblogs.com