Pokaż pozycję myszy x i y z javascript

Question

Pierwsza wersja nie pokazuje mi x i y i otrzymuję komunikat o błędzie: Uncaught TypeError: Cannot read property 'pageX' of undefined Druga wersja działa, ale jest bardzo podobna do kodu, nie może znaleźć problemu.

pierwsza wersja (NIE DZIAŁA)

<form name ="show"> 
     <input type="text" name="mouseXField" value="0" size="6">Mouse X Position<br> 
     <input type="text" name="mouseYField" value="0" size="6">Mouse Y Position<br> 
    </form> 

     <script type="text/javascript"> 

     var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false; 

     if (!mie) { 

      document.captureEvents(Event.MOUSEMOVE); 
      document.captureEvents(Event.MOUSEDOWN); 
     } 


     document.onmousemove = mousePos(); 
     document.onmousedown = mouseClicked(); 

     var mouseClick; 
     var keyClicked; 

     var mouseX = 0; 
     var mouseY = 0; 

     function mousePos (e) { 

      if (!mie) { 
       mouseX = e.pageX; 
       mouseY = e.pageY; 
      } 
      else 
       mouseX = event.clientX + document.body.scrollLeft; 
       mouseY = event.clientX + document.body.scrollTop; 


     document.show.mouseXField.value = mouseX; 
     document.show.mouseYField.value = mouseY; 

     return true; 
     } 

     </script> 

druga wersja (robocza)

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


     <script type="text/javascript"> 

      var IE = document.all?true:false 


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


      document.onmousemove = getMouseXY; 


      var tempX = 0 
      var tempY = 0 



      function getMouseXY(e) { 
       if (IE) { 

       tempX = event.clientX + document.body.scrollLeft 
       tempY = event.clientY + document.body.scrollTop 
       } 
       else 
       { 
       tempX = e.pageX 
       tempY = e.pageY 
       } 


       document.Show.MouseX.value = tempX 
       document.Show.MouseY.value = tempY 

       return true 
       } 
     </script>  

Answer 1

Na pierwszy rzut oka: clientX powinny być clientY i brakuje {} w twojej else:

else { 
    mouseX = event.clientX + document.body.scrollLeft; 
    mouseY = event.clientY + document.body.scrollTop; 
} 

Również ty trzeba wysłać zdarzenie do funkcji,

document.onmousemove = function (e) {mousePos(e);}; 
... 
function mousePos (e) { 
... 

to sprawdzić: http://jsfiddle.net/NLsdZ/1/

Również stosowanie captureEvents jest przestarzała, należy użyć addEventListener zamiast. Więcej informacji: http://forums.asp.net/t/1576872.aspx

Answer 2

Zauważyłem również, że nie pobierasz informacji poniżej, a przynajmniej nie potwierdzasz, że jesteś.

var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false; 

    if (!mie) { 

     document.captureEvents(Event.MOUSEMOVE); 
     document.captureEvents(Event.MOUSEDOWN); 
    } 


    document.onmousemove = mousePos(); 
    document.onmousedown = mouseClicked(); 

powinno być jak/lub ostatecznie pracował dla mnie jako:

window.onload = function() { 
     mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false; 


    if (!mie) { 
     document.captureEvents(Event.MOUSEMOVE); 
     document.captureEvents(Event.MOUSEDOWN); 
    } 
     document.onmousemove = function (e) {mousePos(e);}; 
     document.onmousedown = function (e) {mouseClicked();}; 
};