JavaScript_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.clientX,'y':clientY}
    } 

関連文書

単純なテストでは問題ありませんが、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 = event || window.event;
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientY + scrollY;
      //alert('x: ' + x + '\ny: ' + y);
      return { 'x': x, 'y': y };
    } 

上記の内容は、エディターが紹介したJavaScriptをベースにしたマウス位置の取得方法を色々と紹介したものです。