在DIV元素中跟蹤鼠標

我想跟蹤用戶鼠標並顯示X的座標，但只有當鼠標位於特定的div元素「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>

此代碼顯示鼠標在每個元素的正確位置。但不適用於特定元素。

來源

2017-04-23 Slint 7789

你的目標是相對光標位置的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>

來源

2017-04-23 01:07:10 aeid

謝謝，它工作正常:) –

鼠標你可以改變document.onmousemove = MouseTrack;到： document.getElementById('spielfeld').onmousemove = MouseTrack;

來源

2017-04-23 01:11:26

你可以看到下面的工作代碼;

<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>

來源

2017-04-23 01:13:11

在DIV元素中跟蹤鼠標

回答

相關問題