Conceptos de DHTML

Este evento se dispara cuando se mueve la flecha del mouse dentro del elemento HTML respectivo.

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.

pagina.html

<!DOCTYPE html>
<html lang="es" id="region" onmousemove="mover(event)">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <p id="corx">coordenada x=</p>
    <p id="cory">coordenada y=</p>
    <script src="funciones.js "></script>
</body>

</html>

funciones.js

function mover(e) {
    let corx = document.getElementById('corx')
    let cory = document.getElementById('cory')
    corx.innerText = 'coordenada x=' + e.clientX
    cory.innerText = 'coordenada y=' + e.clientY
}

A la marca 'html' le agregamos la propiedad onmousemove y le pasamos el objeto event:

<html lang="es" id="region" onmousemove="mover(event)">

La función mover se ejecuta cada vez que desplazamos la flecha del mouse dentro de la página.
La función mover recibe el objeto event (no es obligatorio que el parámetro de la función se llame event, en este caso la hemos llamado e):

function mover(e) {
    let corx = document.getElementById('corx')
    let cory = document.getElementById('cory')
    corx.innerText = 'coordenada x=' + e.clientX
    cory.innerText = 'coordenada y=' + e.clientY
}

Mediante estas referencias accedemos a sus textos.

31 - Evento onmousemove

Retornar