event - JavaScript obtiene las coordenadas x e y al hacer clic con el mouse
mouse events javascript (3)
La solución simple es esta:
game.js:
document.addEventListener(''click'', printMousePos, true);
function printMousePos(e){
cursorX = e.pageX;
cursorY= e.pageY;
$( "#test" ).text( "pageX: " + cursorX +",pageY: " + cursorY );
}
Tengo una pequeña etiqueta div que cuando hago clic en ella (evento onClick ), ejecutará la función printMousePos() . Estas son las etiquetas 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>
Esta es la función printMousePos en un archivo .js separado:
function printMousePos() {
var cursorX;
var cursorY;
document.onmousemove = function(e){
cursorX = e.pageX;
cursorY = e.pageY;
}
document.getElementById(''test'').innerHTML = "x: " + cursorX + ", y: " + cursorY;
}
Sí, la función realmente funciona (sabe cuándo se hace clic en ella y todo), pero devuelve undefined tanto para x como para y, por lo tanto, asumo que el código de obtener x e y en la función es incorrecto. ¿Algunas ideas? También sé que no hay ninguna función incorporada dentro de javascript para devolver la xey en java, ej. ¿Habría una manera de hacerlo con jQuery o php? (evite eso si es posible, sin embargo, javascript sería mejor). ¡Gracias!
Me gusta esto.
function printMousePos(event) {
document.body.textContent =
"clientX: " + event.clientX +
" - clientY: " + event.clientY;
}
document.addEventListener("click", printMousePos);
MouseEvent.clientX Solo lectura
La coordenada X del puntero del mouse en las coordenadas locales (contenido DOM).MouseEvent.clientY Solo lectura
La coordenada Y del puntero del mouse en las coordenadas locales (contenido DOM).
Parece que su función printMousePos debería:
- Consigue las coordenadas X e Y del ratón.
- Agrega esos valores al HTML
Actualmente, hace esto:
- Crea variables (indefinidas) para las coordenadas X e Y del mouse
- Adjunta una función al evento "mousemove" (que establecerá esas variables en las coordenadas del mouse cuando se active con un movimiento del mouse)
- Agrega los valores actuales de tus variables al HTML
¿Ves el problema? Sus variables nunca se configuran, porque en cuanto agrega su función al evento "mousemove", las imprime.
Parece que probablemente no necesites ese evento mousemove en absoluto; Intentaría algo como esto:
function printMousePos(e) {
var cursorX = e.pageX;
var cursorY = e.pageY;
document.getElementById(''test'').innerHTML = "x: " + cursorX + ", y: " + cursorY;
}
Edición : No noté que no estaba pasando ningún argumento a printMousePos() , lo actualizó a printMousePos(e)