2010-03-23 9 views
0

J'ai trouvé cet extrait sur Ajaxian, mais je ne peux pas sembler utiliser le cursor.y (ou cursor.x) comme une variable et lorsque la fonction est appelée tel ne semble pas fonctionner. Y a-t-il un problème de syntaxe ou autre chose?javascript position de la souris par rapport au site prefferably sans jQuery

function getPosition(e) { 
    e = e || window.event; 
    var cursor = {x:0, y:0}; 
    if (e.pageX || e.pageY) { 
     cursor.x = e.pageX; 
     cursor.y = e.pageY; 
    } 
    else { 
     cursor.x = e.clientX + 
     (document.documentElement.scrollLeft || 
     document.body.scrollLeft) - 
     document.documentElement.clientLeft; 
     cursor.y = e.clientY + 
     (document.documentElement.scrollTop || 
     document.body.scrollTop) - 
     document.documentElement.clientTop; 
    } 
    return cursor; 
} 

Je preffer de ne pas utiliser jQuery UI si possible, depuis que je suis toujours thaught de jQuery et librarys un peu comme un pour la pluspart JS programmation.

+3

Hourra! Il y a en fait une autre personne qui n'aime pas les bibliothèques JS = D – Chibu

+0

'Je préfère ne pas utiliser jQuery si possible' ... Vous ne pouvez pas commencer à imaginer ce qui vous manque. Notez que jQuery n'est pas identique à l'interface utilisateur jQuery. – SLaks

+1

Vous semblez souffrir du syndrome NIH http://en.wikipedia.org/wiki/Not_Invented_Here. Les développeurs les plus expérimentés reconnaissent l'utilité des bonnes bibliothèques et les utilisent lorsqu'elles sont indiquées. Dans ce cas particulier, vous faites simplement plus de travail pour vous que vous ne le savez. Bonne chance avec ça. –

Répondre

0

Cet extrait doit être appelé dans un gestionnaire d'événements de la souris, avec l'objet événement du gestionnaire.

+0

Oui je l'ai appelé comme ceci onclick = "getPosition (e); anotherfunct();" (et oui, la variable est utilisée dans anotherfunct() – Constructor

+0

Vous devez passer 'event', pas' e' De même, comment passez-vous la valeur de retour à 'anotherfunc'? – SLaks

+0

Exemple: mouseposx = cursor.x – Constructor

1

Cela a toujours été difficult to achieve cross-browser, mais cela est à peu près aussi bon que vous pouvez obtenir ...

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Javascript Test</title> 
    <script type="text/javascript"> 
     window.onload = function() { 
     document.onmousemove = function(e) { 
      if(!e) e = window.event; 

      if(e.pageX == null && e.clientX != null) { 
      var doc = document.documentElement, body = document.body; 

      e.pageX = e.clientX 
        + (doc && doc.scrollLeft || body && body.scrollLeft || 0) 
        - (doc.clientLeft || 0); 

      e.pageY = e.clientY 
        + (doc && doc.scrollTop || body && body.scrollTop || 0) 
        - (doc.clientTop || 0); 
      } 

      document.getElementById("pos").innerHTML = e.pageX + ", " + e.pageY; 
     } 
     } 
    </script> 
    </head> 
    <body> 
    <h1>Position: <span id="pos">0, 0</span></h1> 
    </body> 
</html> 
+1

Pour ce que ça vaut, voici comment jQuery le fait –

0

// modifier // Juste au cas où je mal compris vous ne pouvez pas définir la position physique dans le javascript de la souris .

Je trouve une réponse de type ici je vais donc simplement un lien vers elle à des fins d'étude. Show mouse x and y position with javascript

Edité ---- je voulais partager ce qui a fonctionné pour moi.

C'est une forme de code que j'ai trouvé au lien ci-dessus j'ai changé légèrement. Il semble que je doive mettre certaines choses à window.onload.

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


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

       document.onmousedown = function (e) {mouseClicked();}; 
}; 


      var mouseClick; 
      var keyClicked; 
      var mouseX = 0; 
      var mouseY = 0; 

function mousePos (e) { 
    if (!IE) { 
       mouseX = e.pageX; 
       mouseY = e.pageY; 
    }else{ 
       mouseX = event.clientX + document.body.scrollLeft; 
       mouseY = event.clientY + document.body.scrollTop; 
    } 
       return true; 
}