Zeigen Sie Maus x und y Position mit Javascript

Question

Erste Version zeigt mir nicht x und y und bekomme ich erhalten folgenden Fehler: Uncaught TypeError: Cannot read property 'pageX' of undefined Die zweite Version funktioniert, ist aber sehr ähnlich codiert, kann das Problem nicht finden.

erste Version (NICHT ARBEITEN)

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

zweite Version (WORKING)

 <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

Auf einem ersten Blick: clientX sollte clientY und fehlende {} in Ihrem sein else:

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

Auch Sie müssen das Ereignis an die Funktion zu senden,

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

Check this out: http://jsfiddle.net/NLsdZ/1/

Auch Verwendung von captureEvents ist veraltet, Sie addEventListener stattdessen verwenden sollten. Mehr Infos gibt es hier: http://forums.asp.net/t/1576872.aspx

Answer 2

Ich hatte auch bemerkt, dass du unten nicht auflädst, oder zumindest sagst, dass du es bist.

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

Sollte sein wie/oder arbeitete schließlich für mich als:

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