JavaScriptでマウスクリック位置を取得するにはどうすればよいですか? 3つの入手方法まとめ

実際、これは携帯電話のインタラクションの一般的な側面でもありますが、ブラウザごとに異なる結果が表示されることに失望しています。 js を使用してマウス クリックの位置を取得する方法を見て、詳細なチュートリアルを要約します。

#1: マウスは画面を基準としています。

マウスのクリック位置を考慮すると、比較的簡単です。マウスのクリック後、screenX と screenY を使用してクリックのおおよその位置が決定され、それによって画面の上下のマージンに対する相対位置が決定されます。iframe などの要素は考慮されませんが、パフォーマンスが考慮されます。異なるブラウザでも同じです。

例:

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

2: マウスはブラウザ ウィンドウを基準にしています。

上記の単純なコードによって位置が決定される場合、多くの場合、次のようになります。これだけではまだ十分ではありません。一般に、ブラウザ ウィンドウを基準としたマウスの座標を取得し、クライアント X と clientY で表すことができる、ウィンドウを基準としたマウスの上マージンと左マージンをそれぞれ取得する必要があるからです。

例:

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

3: ドキュメントに対するマウスの相対位置

clientX と clientY を使用して、現在のブラウザ ウィンドウの座標を取得できます。 , しかし、これらの条件はすべて限定されています。ページがスクロールしているように見える場合、このとき、スクロールの変位を追加するだけで済みます。

例:

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

Firefox ブラウザの現在の問題は、はるかに単純になります。Firefox は pageX と pageY の 2 つの属性をサポートし、ページのスクロールをすでに考慮しているからです。

上記はJavaScriptでマウスクリックの位置を取得する方法です。

JavaScript ビデオ チュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。

以上がJavaScriptでマウスクリック位置を取得するにはどうすればよいですか? 3つの入手方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。