 |
Evento onmousemove
El evento onmousemove ocurre cuando el puntero se mueve mientras está sobre un elemento.
<element onmousemove="myScript">
Si queremos recuperar la coordenada donde se encuentra en ese momento el mouse debemos pasar el objeto event como parámetro.
Haremos un ejemplo donde capturamos el evento onmousemove a nivel de la marca body es decir que se dispara cada vez que desplazamos el mouse dentro de la página. Mostraremos la coordenada donde se encuentra la flecha del mouse.
Ejemplo
Ejecute un JavaScript al mover el puntero del mouse sobre un elemento <div>:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 200px;
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<div onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<p>Pase el mouse sobre el rectángulo de arriba y obtenga las coordenadas del puntero del mouse.</p>
<p>Cuando el mouse se mueve sobre el div, el elemento p mostrará las coordenadas horizontales y verticales del
puntero del mouse, cuyos valores son devueltos por las propiedades clientX y clientY en el objeto MouseEvent..</p><p id="demo"></p>
<script>
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordendadas: (X->" + x + ",Y->" + y + ")";
document.getElementById("demo").innerHTML = coor;
}function clearCoor() {
document.getElementById("demo").innerHTML = "";}
</script>
</body>
</html>