Antes de aprender los datos de coordenadas en el objeto de evento, debemos comprender la operación DOM: el marcador de posición de la etiqueta
1. Marcador de posición para etiquetas
En el estilo CSS, el atributo de modelo de cuadro determina el marcador de posición de una etiqueta
Obtener un marcador de posición para una etiqueta:
1. contenido + relleno + borde
etiqueta objeto.offsetWidth etiqueta objeto.offsetHeight
2. Contenido + relleno
etiqueta objeto.clientWidth etiqueta objeto.clientHeight
3. El ancho de la línea del borde superior izquierdo
etiqueta objeto.clientTop etiqueta objeto.clientLeft
4. La distancia entre la etiqueta actual y el padre de posicionamiento de JavaScript
objeto de etiqueta.offsetTop objeto de etiqueta.offsetLeft
Quién es el padre de la ubicación, almacenado en la propiedad .offsetParent del objeto de etiqueta
Si la etiqueta no tiene padre/padre no está posicionado, el padre posicionado es el cuerpo, que es el documento html
Si la etiqueta tiene un padre y el padre tiene un atributo posicionado, el padre posicionado es la etiqueta principal
Si la pestaña tiene un posicionamiento fijo, el padre de posicionamiento es la ventana de visualización
Si la etiqueta es display:none, la etiqueta no tiene marcador de posición
2. Datos de coordenadas en el objeto de evento
El objeto de evento es un parámetro en la función de procesamiento de eventos, que almacena el objeto de etiqueta/información de datos relacionados que activa el evento, y e.target es el objeto de etiqueta que activa el evento.
e.offsetX e.offsetY
Coordenadas relativas a la esquina superior izquierda del objeto de etiqueta que activó el evento
Si hay una etiqueta p anidada en la etiqueta div
La etiqueta p en la que se hizo clic e.offsetX e.offsetY son las coordenadas relativas a la esquina superior izquierda de la etiqueta p
La etiqueta div en la que se hizo clic e.offsetX e.offsetY son las coordenadas relativas a la esquina superior izquierda de la etiqueta div
e.clienteX e.clienteY
En relación con la esquina superior izquierda de la ventana de visualización
e.páginaX y.páginaY
Coordenadas relativas a la esquina superior izquierda del HTML
3. Caso: seguimiento del clic del mouse (evento de clic)
<!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>
* {
margin: 0;
padding: 0;
}
div {
width: 600px;
height: 600px;
padding: 100px;
border: 20px solid paleturquoise;
background: rgb(160, 241, 160);
display: flex;
justify-content: center;
align-items: center;
margin: 200px auto;
position: relative;
}
p {
width: 50px;
height: 50px;
padding: 50px;
border: 10px solid orange;
background: pink;
position: absolute;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
//获取标签对象
var oDiv = document.querySelector('div');
var oP = document.querySelector('p');
//给div绑定点击事件
//将事件类型可以换为 mousemove
oDiv.addEventListener('click', function (e) {
//获取父级占位（内容+padding）
let oDivWidth = oDiv.clientWidth;
let oDivHeight = oDiv.clientHeight;
//获取子级占位（内容+padding+border）
let oPWidth = oP.offsetWidth;
let oPHeight = oP.offsetHeight;
//获取父级标签到页面的距离
let oDivLeft = oDiv.offsetLeft;
let oDivTop = oDiv.offsetTop;
//获取父级标签边框线宽度
let oDivBorderLeft = oDiv.clientLeft;
let oDivBorderTop = oDiv.clientTop;
//计算p定位数据
//点击定位 - 父级外边距 - 父级边框线 - 子级占位/2
let x = e.pageX - oDivLeft - oDivBorderLeft - oPWidth / 2;
let y = e.pageY - oDivTop - oDivBorderTop - oPHeight / 2;
//设定极值
//设定最小值
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
//设定最大值:父级占位(内容+padding) - 子级占位(内容+padding+border)
x = x > oDivWidth - oPWidth ? oDivWidth - oPWidth : x;
y = y > oDivHeight - oPHeight ? oDivHeight - oPHeight : y;
oP.style.left = x + 'px';
oP.style.top = y + 'px';
})
</script>
</body>
</html>