Mostrar la posición x e y del mouse con javascript

Question

La primera versión no me muestra xey y me sale el siguiente error: Uncaught TypeError: Cannot read property 'pageX' of undefined La segunda versión funciona pero tiene un código muy similar, no puede encontrar el problema.

primera versión (no funciona)

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

segunda versión (TRABAJO)

 <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

En una primera vista: clientX debe ser clientY y desaparecidos {} en su else:

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

También usted tienen que enviar el evento a la función,

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

mira esto: http://jsfiddle.net/NLsdZ/1/

Además, el uso de captureEvents está en desuso, se debe utilizar addEventListener lugar. Más información aquí: http://forums.asp.net/t/1576872.aspx

Answer 2

También me di cuenta de que no está cargando a continuación, o al menos indicando que sí.

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(); 

debe ser como/o, finalmente trabajado para mí, como:

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();}; 
};