DIV要素でマウスを追跡する

ユーザーのマウスを追跡し、X &のY座標を表示したいが、マウスが "spielfeld"という特定のdiv要素にある場合のみ。マウスが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 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

ありがとう、それはうまく動作します:) –

上でマウスを追跡するのdivにイベントを配置する必要が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要素でマウスを追跡する

答えて

関連する問題