Javascriptでマウスの現在の場所を取得する実現方法

時には、ウィンドウのドラッグやマウスの移動距離を取得する必要があります。この場合、マウスの前後のページ内の位置を計算することで、必要な結果を得ることができます。以下にいくつかのイベント属性を紹介します：

1、クライアントエリア座標位置

　　マウスイベントは、ブラウザのビューポート内の特定の位置で発生します。この位置情報はイベントオブジェクトのclientXとclientY属性に保存されます。これらの値は、イベントが発生したときのマウス指標がビューポート内の水平および垂直座標（ページのスクロール距離を除く）を示します。以下の図を参照してください：

var div = document.getElementById("myDiv"); //要素を取得します
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("スクリーン座標: " + event.screenX + "," + event.screenY);
});

注：EventUtil.on()は要素にイベントをバインドすることを示し、EventUtil.getEvent(event)はイベントオブジェクトを取得することを示します。EventUtilはカスタムのイベントオブジェクト（JavaScriptを使用して実装）で、クロスブラウザの方法を含んでいます。具体的な実装については、別の記事「いくつかのクロスブラウザのイベント方法」を参照してください。jQueryプラグインを使用しているプロジェクトの場合、対応するメソッドに置き換えることができます。

2、ページ座標位置

　　イベントオブジェクトの属性pageXとpageYは、イベントがページのどの位置で発生したかを教えてくれます。言い換えれば、これらの属性はマウスカーソルがページ内の位置（ウィンドウ内の位置座標に相当）を示します + ページのスクロール距離）。

var div = document.getElementById("myDiv");//idが"myDiv"の要素を取得します
EventUtil.on(div, "click", function(event){//要素にclickイベントをバインド
 event = EventUtil.getEvent(event);//eventイベントオブジェクトを取得
 var pageX = event.pageX,pageY = event.pageY;
 if (pageX === undefined){//IE8および以前のバージョン
  pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
  pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("ページ座標: " + pageX + "," + pageY);
});

3、スクリーン座標位置

　　screenX と screenY 属性を使用すると、マウスイベントが発生したときのマウス指標がスクリーン全体に対しての座標情報を特定できます。以下の図を参照してください：

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("スクリーン座標: " + event.screenX + "," + event.screenY);
});

この記事は『JavaScript 高級プログラミング 第3版』を参照しています。

読んでいただきありがとうございます。皆様のサポートに感謝します！