JavaScript イベントオブジェクトの座標イベントの説明_JavaScript スキル-jsチュートリアル-php.cn

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

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

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

 
var getEventCoord = function ( e ) 
var evt = e||event; 
var html = document.documentElement; //
のスクロールバー return { 

//pageX 属性が true の場合は pageX を使用し、それ以外の場合は clientX を使用します html.scrollLeft 
pageX : evt.pageX html.scrollLeft, 

/ /pageY 属性が true の場合は pageY を使用し、それ以外の場合は clientY を使用します html.scrollTop 
pageY : evt.pageY html.scrollTop, 

//clientX Y 全員同意、保留なし 
clientX : evt.clientX, 
clientY : evt.clientY, 

//layerX 属性が true の場合は、layerX を使用し、そうでない場合は offsetX を使用します 
LayerX : evt.layerX || evt.offsetX, 

//layerY 属性が true の場合は、layerY を使用し、そうでない場合は offsetY を使用します 
21layerY : evt.layerY || 🎜>22 } 
} 

 

使い方は以下の通りです

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

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

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

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