JavaScriptに基づいてマウスの位置を取得するためのさまざまな方法

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

いくつかのDOM操作では、頻繁に使用されるマウスインタラクティブな要素の位置を扱うことがあります。異なるブラウザでは結果が異なり、一部のブラウザでも結果が得られないというのは残念です。いくつかの簡単な要約を行うためのマウスのクリック位置座標に関する記事、IE8、FireFox、Chrome互換でテストされた特別なステートメントコードはありません

マウスクリック位置座標

画面に関連して

それがマウスのクリックに関連している場合は、相対的に単純ですが、マウスのクリックイベント、イベントscreenX、screenYは、iframe要素に関係なく、左マージンと上マージンからスクリーンに対するクリック位置を取得します。同じものを計算する。


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プロパティをサポートしているので、これらの2つのプロパティはページスクロールに含まれているため、Firefoxでは問題がはるかに簡単になります。

Chromeでは、ページスクロールの移動は、document.body.scrollLeft、document.body.scrollTop、およびdocument.documentElement.scrollLeft、document.documentElement.scrollTopを通じてIEで計算できます。


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 };
    } 

上記のコンテンツは、Xiaobianが皆に紹介したJavaScriptに基づいてマウスの位置を取得するためのさまざまな方法です。私は誰もがそれを好きだと思います。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ