Javascript 在DIV元素中跟踪鼠标_Javascript_Html

Javascript 在DIV元素中跟踪鼠标

javascript html

Javascript 在DIV元素中跟踪鼠标,javascript,html,Javascript,Html,我希望跟踪用户鼠标并显示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

我希望跟踪用户鼠标并显示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>

此代码显示鼠标悬停的每个元素的正确位置。

但不是针对特定元素。

必须将事件放置在要跟踪鼠标的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>

您可以更改文档。onmousemove=MouseTrack；致：

document.getElementById'spielfeld'。onmousemove=MouseTrack

您可以看到下面的工作代码

<html>
<body>

<form name="Show">
<input type="text" name="MouseX" value="0" size="7"> X<br>
<input type="text" name="MouseY" value="0" size="7"> Y<br>
</form>
<script>

var s= document.all?true:false

if (!s) document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = getMouseXY;

var tempX = 0
var tempY = 0

function getMouseXY(e) {
  if (s) { 
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  
    tempX = e.pageX
    tempY = e.pageY
  }  

  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  

  document.Show.MouseX.value = tempX
  document.Show.MouseY.value = tempY
  return true
}

</script>
</body>
</html>

您的目标是获取相对于div的光标位置，或者仅当光标位于元素内时才更新光标位置？是的，仅当光标位于元素内时才应更新光标位置。