1. PageX y clienteX
PageX: La posición del mouse en la página, comenzando desde la esquina superior izquierda de la página, es decir, tomando la página como punto de referencia y no cambiando con el movimiento del control deslizante pageX = 200 clientX: La posición del
mouse en el área visible de la página, comenzando desde el área visible del navegador. Comenzando desde la esquina superior izquierda,
es decir, la posición a la que se desliza el control deslizante del navegador en este momento se usa como punto de referencia y cambia a medida que se mueve el control deslizante.
Por ejemplo, la altura original es 200, y la barra de desplazamiento se desliza hacia abajo una distancia de 100, entonces clientX = 100 en este momento
Dos.pantallaX
screenX: el desplazamiento horizontal de la posición del clic del mouse en relación con la esquina superior izquierda de la pantalla de la computadora
Tres.offsetX y capaX
offsetX: la distancia horizontal de la posición del clic del mouse en relación con el objeto que activó el evento
capaX: La posición del mouse en comparación con el sistema de coordenadas actual, es decir, si el elemento disparador no establece un posicionamiento absoluto o un posicionamiento relativo, la página se usa como punto de referencia. Si lo hay, se cambiará el sistema de coordenadas de referencia. desde la esquina superior izquierda del área del borde del modelo de caja del elemento disparador Para el punto de referencia,
es decir, cuando el elemento disparador se establece con posicionamiento relativo o absoluto.
cuatro Desplazamiento superior
offsetTop: El div actual se encuentra a la distancia del padre (la premisa debe estar posicionada), si hay una posición padre: relativa;
cinco. ancho de compensación
offsetWidth: no incluye la distancia del margen, solo borde + contenido + relleno
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
margin: 50px;
padding: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div id="div1"></div>
<div></div>
<script>
const divElm = document.getElementById('div1')
divElm.onmousemove = (e) => {
const pageY = e.pageY; // 相对于页面的距离，带有滚动条的距离
const clientY = e.clientY; // 相对于窗口的距离，不会带有滚动条的距离，滚动条变化，距离就变了
const offsetTop = e.target.offsetTop; // 当前div位于父级的距离（前提得有定位），如果存在父级position: relative;
const offsetY = e.offsetY; // 当前鼠标位于div的距离
const offsetWidth = divElm.offsetWidth; // 不包括margin的距离，只有 border + content + padding
console.log('pageY=' + pageY);
console.log('clientY=' + clientY);
console.log('offsetTop=' + offsetTop);
console.log('offsetY=' + offsetY);
console.log('offsetWidth=' + offsetWidth);
}
</script>
</body>
</html>