3

私はテーブルを作成し、ハンドラーはmousemoveを接続しました。しかし、左上のポイントでは、.offsetX.offsetYは-5-5に等しくなります。なんで？0\0が必要です。

<table cellpadding="0" 
       id="target" 
       cellspacing="0"
       width="602" 
       height="500"  
       style="float:left;
              position:relative;
              background: url(/content/games/kamikaze2/back.jpg) no-repeat 0 0;">
    <tbody>...
</tbody>
</table>

<script type="text/javascript">

    $("#target").mousemove(function (event) {
        var msg = "Handler for .mousemove() called at ";
        msg += event.offsetX + ", " + event.offsetY;
        $("#log").append("<div>" + msg + "</div>");
    });
</script>
4

1 に答える 1

12

その他の例: show-popup-on-mouse-location

要素内のマウス座標

ビューポートに相対的な要素(スクロールバーなし)内のマウス座標を取得する最も正確な方法は、次の差を計算することです。

const getMousePos = (evt) => {
  const pos = evt.currentTarget.getBoundingClientRect();
  return {
    x: evt.clientX - pos.left,
    y: evt.clientY - pos.top
  };
};

document.querySelector("#target").addEventListener('mousemove', (evt) => {
  const mPos = getMousePos(evt);
  evt.currentTarget.textContent = `Mouse position x:${mPos.x}  y:${mPos.y}`;
});
#target {
  position: absolute;
  left: 50px;
  top: 20px;
  width: 200px;
  height: 100px;
  background: #0bf;
  transform: translate(20px, 30px); /* works even with translate */
}
<div id="target"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

これらの値を差し引くと、正確なマウス位置を取得できます。x:0、y:0は要素の左上隅です。要素が CSS 変換されている場合でも、つまり: transform: translate(-50%, -50%)、返される値は依然として正しいです。

于 2012-04-26T05:41:00.673 に答える