JavaScript イベント オブジェクトの座標イベントの説明_JavaScript スキル

テストブラウザのバージョン:

IETester 6,7
IE 8.0
Firefox 3.5.5
Chrome 4.1.249.1064 (45376)
Opera 9.64
Safari 4.0


まず、各主流ブラウザの座標属性とその意味を見てみましょう

IE の場合

event.offsetX
event.offsetY
に対する相対座標e.srcElement
イベントをトリガーしたオブジェクトを基準としたマウス ポインターの位置の x 座標を設定または取得します。
イベントをトリガーしたオブジェクトを基準としたマウス ポインターの位置の y 座標を設定または取得します。


event.clientX
event.clientY
常にビューポートを基準に
のクライアント領域を基準としたマウス ポインタの位置の X 座標を設定または取得します。クライアント領域が含まれないウィンドウ ウィンドウ独自のコントロールとスクロール バー。
ウィンドウのクライアント領域を基準としたマウス ポインターの位置の y 座標を設定または取得します。クライアント領域には、ウィンドウ自体のコントロールやスクロール バーは含まれません。


event.x
event.y
マニュアルにはドキュメント相対と書かれていますが、ie6/7 ではそれらの値は clientX と clientY と一致します
しかし、これは深刻な問題ではありません。ビューポートの相対座標とスクロール バーの高さはロールアウトされており、実際の x(y) は引き続き取得できるためです。この問題は、IE8 の標準モードで解決されます。

マウスを設定または取得します。親ドキュメントを基準としたポインター位置の x ピクセル座標です。
親ドキュメントを基準としたマウス ポインターの位置の y ピクセル座標を設定または取得します。

event.screenX
event.screenY
ユーザーの画面を基準としたマウス ポインターの位置の x 座標を設定または取得します。
ユーザーの画面を基準としたマウス ポインターの位置の y 座標を設定または取得します。

FireFox の場合

event.layerX
event.layerY
e.srcElement を基準とした座標
オブジェクトを基準としたマウス ポインターの位置の x を設定または取得します。イベント座標をトリガーしました。
イベントをトリガーしたオブジェクトを基準としたマウス ポインターの位置の y 座標を設定または取得します。

event.clientX
event.clientY
常にビューポートを基準に
ウィンドウのクライアント領域を基準としたマウス ポインタの位置の x 座標を設定または取得します。クライアント領域には、ウィンドウ自体のコントロールやスクロール バーは含まれません。
ウィンドウのクライアント領域を基準としたマウス ポインターの位置の y 座標を設定または取得します。クライアント領域には、ウィンドウ自体のコントロールやスクロール バーは含まれません。


event.pageX
event.pageY
親ドキュメントを基準としたマウス ポインター位置の x ピクセル座標を設定または取得します。
親ドキュメントを基準としたマウス ポインターの位置の y ピクセル座標を設定または取得します。


event.screenX
event.screenY
ユーザーの画面を基準としたマウス ポインターの位置の x 座標を設定または取得します。
ユーザーの画面を基準としたマウス ポインターの位置の y 座標を設定または取得します。


実際、IE と Firefox にはこれらの属性がすべて含まれていますが、意味はまったく同じです

Chrome と Safari
Chrome とその 2 つです。 Safari 兄弟は、

event.offsetX
event.offsetY
event.layerX
event.layerY

event.clientX event.clientY

event.x
event.y
event.pageX
event.pageY

注: Chrome および Safari Event.x イベントのパフォーマンス.y は IE6 7 と一致しており、event.clientX、event.clientY と同等です


Opera は ie6 7 の道をしっかりと踏襲しており、

event.offsetX
event.offsetY

event.clientX
event.clientY

event.x
event.y
ie とほぼ同じです、幸いにも pageX があります。 pageY
event.pageX
event.pageY

注: Chrome と Safari、Opera のイベント clientX、event.clientY は同じです。
ie8 では、event.x、 event.y は他のブラウザのevent.pageX、event.pageYと同じです


一部のブラウザでは、layerX と Will offsetX、x、pageX が繰り返し表示されるのはなぜですか?
W3C はこれらの属性を標準化していないため、DOM3 ドラフトの MouseEvent 部分は DOM2 の定義に従います。属性のペアは 2 つだけです。long、readonly 型の

clientX
の水平座標です。イベントに関連付けられたビューポートを基準にしてイベントが発生した場所。long、readonly タイプの clientY
イベントに関連付けられたビューポートを基準としたイベントが発生した垂直座標。

screenX タイプ。 long, readonly
画面座標系の原点を基準としたイベントが発生した水平座標。
タイプ long,readonly の screenY
スクリーン座標系の原点を基準としたイベントが発生した垂直座標。

これは失敗なので、この標準をサポートするブラウザには方向性がありません。しかし、ブラウザの製造元は考え直しました。とにかく、W3C はそれを理解できないので、offsetXY と LayerXY から開始する必要があります。 ,
pageXY と xy のいずれかを選択するため、標準を満たすために、両方の属性のペアがブラウザーに入力されます。

何があっても問題は解決しなければなりません。上記の互換性レポートを確認したら、コードのプロトタイプが完成しました

書き始めましょう!

getEventCoord

コードをコピー コードは次のとおりです:

1 var getEventCoord = function ( e )
3 var evt = e||event;
4 var html = document.documentElement; //
5 のスクロールバー return {
6
7 //pageX 属性が true の場合は pageX を使用し、それ以外の場合は clientX を使用します html.scrollLeft
8 pageX : evt.pageX html.scrollLeft,
9
10 / /pageY 属性が true の場合は pageY を使用し、それ以外の場合は clientY を使用します html.scrollTop
11 pageY : evt.pageY html.scrollTop,
12
13 //clientX Y 全員同意、保留なし
14 clientX : evt.clientX,
15 clientY : evt.clientY,
16
17 //layerX 属性が true の場合は、layerX を使用し、そうでない場合は offsetX を使用します
18 LayerX : evt.layerX || evt.offsetX,
19
20 //layerY 属性が true の場合は、layerY を使用し、そうでない場合は offsetY を使用します
21layerY : evt.layerY || 🎜>22 }
23 }

使い方は以下の通りです

コードをコピー コードは次のとおりです。

document.onmousemove = function( e )

{
var coord = getEventCoord(e)
document.title = [coord.pageX,coord] .pageY] ;
}

見た目はかなり良く、日々の作業のニーズを満たすことができますが、まだいくつかの問題があります

1. 🎜>
evt.pageX || evt.clientX html.scrollLeft を使用して判断します。
evt.pageX がこれらの値に等しい限り、null、NaN、''、0、false の式は左側の結果は false となるため、右側の式を計算して式の値
を返しますが、evt.pageX 自体は 0 を返す可能性があります。したがって、この判断は
typeof evt.pageX == 'number' ? evt.pageX : evt.clientX html.scrollLeft
pageX が数値

2 の場合にのみ使用されます。奇妙なモードでは動作できません

奇妙なモードとは何ですか?

IE56 より前のバージョンとの互換性を保つために、IE 6 では Quicks モード (Quicks モード) と標準モード (標準モード)
2 つのモードの違いは、主に CSS のボックス モデルの解釈と BOM に集中しています。これは、スクロールバーの依存オブジェクトが変更されたことを意味します
奇妙なモードでは、スクロールバーは本文に属します。スクロールバーの高さと幅を取得したい場合は、document.body.scrollTop を使用する必要があります。
と標準モード document.documentElement.scrollTop

を使用する必要があります。2 つのモード間の切り替え方法は主に doctype によって決まります。http://dancewithnet.com/2009/06/ を参照してください。 14/activating-browser-modes-with-doctype/

IE6 以降、IE はプロパティ document.compatMode を使用して、ドキュメントが変なモードに切り替えられているか標準モードに切り替えられているかを検出します。
If の値document.compatMode
は BackCompat: 以上です quirks モードでは
は CSS1Compat: 標準モードでは


したがって、両方のモードで適切に動作するには、
がどちらであるかを決定する必要がありますmode document.compatMode は
判定方法も非常に簡単で、compatMode の値の先頭文字が b であるかどうかを判定するだけで、scrollTop の依存オブジェクトを選択することができます。
判定方法は次のようになります。次のように記述します
document.compatMode.indexOf('b ')==0
正規表現を使用して
/^b/i.test( document.compatMode )
2 番目を記述することもできます1つはもっとすごいです。 。まあ、2 番目のバージョンを使用してください (実際には、最初のバージョンの方がパフォーマンスが優れています)

次に 2 番目のバージョンを作成しましょう

コード

コピーcode コードは次のとおりです。 var getEventCoord = function( e )

{

var evt = e||event, d = document 、
scrollEl = /^b/i.test( d.compatMode ) ? d.body : d.documentElement、
supportPage = typeof evt.pageX == 'number'、
supportLayer = typeof evt。 layerX == 'number'
return {
pageX : supportPage ? evt.clientXscrollEl.scrollLeft,
pageY : supportPage evt.pageY : evt.clientY cancelEl.scrollTop,
clientX : evt.clientX,
clientY : evt.clientY,
layerX : supportLayer ? evt.layerX : evt.offsetX,
layerY : supportLayerY : evt.offsetY
}
}



この関数でできることはこれだけです。最初に思いつくのは、ドラッグ アンド ドロップです。それを検証するために、小さなドラッグ アンド ドロップ関数を作成してみましょう。次に

コード

コードをコピー コードは次のとおりです:

function dragMe( o )
{
var supportCapt = !!o.setCapture;
o.onmousedown = function(e)
{
var coord = getEventCoord( e), x = coord.layerX, y = coord.layerY;
if( supportCapt ) o.setCapture();
document.onmousemove = function(e)
{
var coord = getEventCoord (e);
o.style.left = coord.pageX - x 'px';
o.style.top = coord.pageY - y 'px';
}
document.onmouseup = function()
{
this.onmousemove = this.onmouseup = null;
if( supportCapt ) o.releaseCapture();
}
}
}
dragMe ( document.getElementById('block') );

Example

<title> Event </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body { font-size:12px } #block { -moz-user-select:none; width:100px; height:100px; background:gray; color:white; line-height:100px; text-align:center; } .move { cursor:move; } </style> <div onselectstart="return false" style="left:100px;top:100px;position:absolute;" id="block"> drag me </div> <div id="info"></div>