web-dev-qa-db-fra.com

javascript obtenir les coordonnées x et y en un clic de souris

J'ai une petite balise div qui, lorsque je clique dessus (événement onClick), exécute la fonction printMousePos(). Voici les balises HTML:

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

Voici la fonction printMousePos dans un fichier .js séparé:

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 (elle sait quand vous cliquez dessus et tout le reste), mais elle renvoie undefined pour x et y. Je suppose donc que le code get x et y de la fonction est incorrect. Des idées? Je sais aussi que javascript ne contient pas de fonctions intégrées permettant de renvoyer le x et le y comme en Java, par exemple. Y aurait-il un moyen de le faire avec, par exemple, JQuery ou php? (évitez ceux-là si possible, javascript serait préférable). Merci!

javascripthtmlonclickonmouseclick
29
Bryce Hahn

Ainsi l'était.

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

document.addEventListener("click", printMousePos);

MouseEvent - MDN

MouseEvent.clientXRead only
Die X-Koordinate des Mauszeigers à Lokalen Koordinaten (DOM-Inhalt).

MouseEvent.clientYRead only
Die Y-Koordinate des Mauszeigers à Lokalen Koordinaten (DOM-Inhalt).

68
Jonathan

Il semble que votre fonction printMousePos devrait:

  1. Obtenir les coordonnées X et Y de la souris
  2. Ajoutez ces valeurs au HTML

Actuellement, il fait ceci:

  1. Crée des variables (non définies) pour les coordonnées X et Y de la souris
  2. Associe une fonction à l'événement "mousemove" (qui définira ces variables sur les coordonnées de la souris lorsqu'elles sont déclenchées par un déplacement de la souris)
  3. Ajoute les valeurs actuelles de vos variables au HTML

Voir le problème? Vos variables ne sont jamais définies, car dès que vous ajoutez votre fonction à l'événement "mousemove", vous les imprimez.

Il semble que vous n’ayez probablement pas besoin de cet événement mousemove; Je voudrais essayer quelque chose comme ça:

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

la solution simple est la suivante:

game.js:

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

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