JavaScript で要素に対するマウスの位置を取得するにはどうすればよいですか?

要素を基準としたマウスの位置を取得する

特定の要素を基準としたマウスの位置を取得することは、キャンバスベースのペイントなどのインタラクティブなアプリケーションにとって重要です。アプリ。これを実現するには、getBoundingClientRect() メソッドを利用できます。

次の JavaScript コード スニペットを考えてみましょう:

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top;  //y position within the element.
  console.log("Left? : " + x + " ; Top? : " + y + ".");
};</code>

この例では、ID を持つ要素に onclick イベントを添付します。 「クリックしてください。」クリックされると、イベント ハンドラーは getBoundingClientRect() を使用して、クリックされた要素の境界四角形を取得します。この四角形は、画面上の要素の位置と寸法を表します。

要素に対するマウスの位置を計算するには、クリック イベントの clientX プロパティと clientY プロパティから境界四角形の左と上の座標を減算します。これにより、クリックされた要素内のマウスの位置を表す x と y が得られます。

以上がJavaScript で要素に対するマウスの位置を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。