javascript obtenir les coordonnées x et y sur le clic de la souris
j'ai une petite balise div qui quand je clique dessus (onClick event), il exécutera 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 la fonction printMousePos dans un seperate .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 de fonctions intégrées dans javascript lui-même pour retourner les x et y comme dans java, ex.. y aurait-il un moyen de le faire avec dire JQuery ou php? (évitez ceux si possible, javascript serait mieux). Merci!
3 réponses
Comme ceci.
function printMousePos(event) {
document.body.textContent =
"clientX: " + event.clientX +
" - clientY: " + event.clientY;
}
document.addEventListener("click", printMousePos);MouseEvent.clientX Lecture seule
La coordonnée X du pointeur de la souris en coordonnées locales (DOM content).MouseEvent.clientY Lecture seule
La coordonnée Y du pointeur de la souris en coordonnées locales (DOM content).
cela ressemble à votre printMousePos la fonction:
- obtenir les coordonnées X et Y de la souris
- ajouter ces valeurs au HTML
Actuellement, il fait ceci:
- crée des variables (non définies) pour les coordonnées X et Y de la souris
- Attache une fonction à la "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)
- ajoute le courant valeurs de vos variables au HTML
vous voyez 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'avez probablement pas besoin de cet événement mousemove du tout; 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;
}
Modifier: N'a pas remarqué que vous n'étiez pas en passant un argument pour printMousePos(), mis à jour à printMousePos(e)
la solution la plus simple est:
jeu.js:
document.addEventListener('click', printMousePos, true);
function printMousePos(e){
cursorX = e.pageX;
cursorY= e.pageY;
$( "#test" ).text( "pageX: " + cursorX +",pageY: " + cursorY );
}