javascript - 在 DIV 元素中跟踪鼠标

Question

我想跟踪用户鼠标并显示 X 和 Y 坐标，但前提是鼠标位于名为“spielfeld”的特定 div 元素中。当鼠标离开 div 元素时，代码不应再跟踪鼠标。

这是我的代码:

<div id="spielfeld">

  <a id="x_result>0</a>
  <a id="y_result>0</a>

      <script type="text/javascript">

        function MouseTrack(e) {
          var result_x = document.getElementById('x_result')
          var result_y = document.getElementById('y_result')

          result_x.innerHTML = e.layerX;
          result_y.innerHTML = e.layerY;
        }

        document.onmousemove = MouseTrack;

      </script>
</div>

此代码显示鼠标所在的每个元素的正确位置。但不适用于特定元素。

Answer 1

你必须将事件放在你想要跟踪鼠标的div上

<div id="spielfeld">

  <a id="x_result>0</a>
  <a id="y_result>0</a>

      <script type="text/javascript">
        function MouseTrack(e) {
           // don't use layerX and layerY they are non standard . 
           // select dom element and update here . 
           console.log(e.screenX , e.screenY)
        }

        document.querySelector('#spielfeld').addEventListener('mousemove' , MouseTrack)  

      </script>
</div>