JavaScriptによるマウスクリック位置座標の取得方法_基礎知識

一部の DOM 操作では、マウス操作が頻繁に使用されますが、ブラウザによって結果が異なり、その結果、この記事ではそうでない場合もあります。マウス クリック位置の座標の取得に関する簡単な概要 コードが IE8、FireFox、Chrome でテストされ互換性があるという特別な記述はありません

マウス クリック位置の座標

画面を基準

マウスのクリックを使用して位置を決定する場合、マウス クリック イベントを取得した後、イベント screenX と screenY で画面の左マージンと上マージンを基準としたクリック位置を取得します。異なるブラウザでもパフォーマンスはかなり安定しています。

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

function getMousePos(event) {
var e =event || window.event;
return {'x':e.screenX,'y':screenY}
}

ブラウザ ウィンドウに相対

単純なコードを実装できますが、これだけでは十分ではありません。ほとんどの場合、ブラウザ ウィンドウを基準としたマウス クリック位置の座標を取得する必要があるためです。イベントの clientX 属性と clientY 属性はそれぞれ、マウス クリック位置がドキュメントの左マージンと上マージンを基準にしていることを示します。同様に、次のようなコードを書きました

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

function getMousePos (event) {
var e =event || window.event;
return {'x':e.client 🎜>関連ドキュメント

があります単純なテストでは問題ありませんが、clientX と clientY は、ページ スクロール要素を無視して、現在の画面を基準とした相対座標を取得します。これは、多くの条件下では非常に困難ですが、ページ スクロール、つまり、現在の画面に対する相対座標を考慮する必要がある場合はどうでしょうか。ドキュメント(body要素)?スクロール変位を追加するだけです。次に、ページのスクロール変位を計算してみます。
実際、Firefox ではページのスクロールがすでに考慮されている属性 pageX と pageY をサポートしているため、問題は Firefox でははるかに簡単になります。 Chrome では、 document.body.scrollLeft と document.body.scrollTop を通じてページ スクロールの変位を計算できますが、IE では、 document.documentElement.scrollLeft と document.documentElement.scrollTop を使用できます


コードをコピーします

コードは次のとおりです。function getMousePos(event) { var e = events || window.event; varscrollX = document.documentElement.scrollLeft || document.body.scrollLeft;

varscrollY = document.body.scrollTop || var x = e. pageX || e.clientX スクロール X;

var y = e.pageY || e.clientY スクロール Y;
//alert('x: ' x 'ny: ' y);
return { 'x ': x, 'y ': y };
}