javascript obtenir les coordonnées x et y de la souris cliquez sur

J'ai un peu de balise div qui quand je clique dessus (onClick cas), il sera exécuté le printMousePos() fonction.
C'est le HTML tags:

<html>
    <header>
        <!-- By the way, this is not the actual html file, just a generic example. -->
        <script src='game.js'></script>
    </header>
    <body>
        <div id="example">
            <p id="test">x: , y:</p>
        </div>
    </body>
</html>

C'est le printMousePos fonction dans un autre .fichier js:

function printMousePos() {
    var cursorX;
    var cursorY;
    document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY;
}

Oui, la fonction fonctionne réellement (il sait quand vous cliquez dessus et tout et tout), mais il renvoie undefined de x et de y, donc je suis en supposant que le get x et y le code de la fonction est incorrect. Des Idées? Je sais aussi qu'il n'y a pas toutes les fonctions intégrées dans le javascript lui-même pour revenir à l'x et y comme en java, ex.. y aurait-il un moyen de le faire avec dire JQuery ou php? (éviter si possible bien que, javascript serait le mieux). Merci!

  • event.clientX et event.clientY
  • J'ai essayé, encore renvoie undefined si.
  • CursorX et superficielle ne sont pas définis avant le déplacement de la souris, l'événement est déclenché. Si vous voulez que la position de l'événement click pass event à la printMousePos fonction
InformationsquelleAutor Bryce Hahn | 2014-05-19
  1. 68

    Comme ça.

    JS:

    function printMousePos(event) {
  document.body.textContent =
    "clientX: " + event.clientX +
    " - clientY: " + event.clientY;
}

document.addEventListener("click", printMousePos);

    MouseEvent - MDN

    MouseEvent.clientX Lecture seule

    La coordonnée X du pointeur de la souris en local (DOM contenu) coordonnées.

    MouseEvent.clientY Lecture seule

    La coordonnée Y du pointeur de la souris en local (DOM contenu) coordonnées.

    • Re: pageX/Y contre clientX/Y
    • C'est la réponse correcte et doit être marqué comme
    • Cela a résolu mon problème merci..
    InformationsquelleAutor Jonathan
  2. 5

    Il semble que votre printMousePos fonction:

    1. Obtenir les coordonnées X et Y de la souris
    2. Ajouter ces valeurs à l'HTML

    Actuellement, il fait ceci:

    1. Crée (pas défini) des variables pour les coordonnées X et Y de la souris
    2. Associe une fonction à l' "mousemove" événement (qui va définir ces variables pour les coordonnées de la souris lorsqu'il est déclenché par un mouvement de la souris)
    3. Ajoute les valeurs de vos variables HTML

    Voir le problème? Vos variables ne sont jamais arriver, parce que dès que vous ajoutez à votre fonction à la "mousemove" cas de les imprimer.

    Il semble que vous n'avez probablement pas besoin de cette événement mousemove à tous; je voudrais essayer quelque chose comme ceci:

    function printMousePos(e) {
    var cursorX = e.pageX;
    var cursorY = e.pageY;
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY;
}
    InformationsquelleAutor Kylok
  3. 0

    la solution la plus simple est: est-ce

    game.js:

    document.addEventListener('click', printMousePos, true);
function printMousePos(e){

      cursorX = e.pageX;
      cursorY= e.pageY;
      $( "#test" ).text( "pageX: " + cursorX +",pageY: " + cursorY );
}
    InformationsquelleAutor Tea