☰

要素に対するマウスの位置を見つける 質問する

tag-icon • tag-icon javascript
要素に対するマウスの位置を見つける 質問する

キャンバスを使用して小さなペイント アプリを作成したいと思っています。そのため、キャンバス上のマウスの位置を見つける必要があります。

ベストアンサー1

コピー/貼り付けできる jQuery を使わない回答が見つからなかったため、私が使用した解決策は次のとおりです。

document.getElementById('clickme').onclick = function(e) {
      // e = Mouse click event.
      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 + ".");
    }
#clickme {
  margin-top: 20px;
  margin-left: 100px;
  border: 1px solid black;
  cursor: pointer;
}
<div id="clickme">Click Me -<br>
(this box has margin-left: 100px; margin-top: 20px;)</div>

完全な例の JSFiddle

おすすめ記事