鼠标 event 中的各种 X 与 Y

鼠标 event 中的各种 X 与 Y

在前端开发中，鼠标事件是一个非常基础但又极其重要的知识点。然而，对于初学者来说，鼠标事件中的各种X和Y坐标往往容易混淆。本文将详细讲解这些坐标的含义和使用场景，并通过一个拖拽案例来加深理解。

event 中的各种 X 与 Y

初学者在使用鼠标事件监听器时，总会搞混 X 与 Y 的作用与含义，这篇文章便来仔细讲讲这方面的知识。

client x | y

client 指的是当前事件触发位置相对于浏览器左上角的坐标，由于该值是相对于浏览器的坐标，因此如果绑定的元素滚动则该值会因为页面的滚动导致该值的计算原点改变，从而导致结果不同。

layer x | y

layer 指的是当前事件触发位置相对于其具有定位元素的父元素的左上角的坐标，如果找不到父元素则以 body 的左上角为原点。

offset x | y

offset 指的是当前事件触发位置相对于事件元素的坐标，并且由于该属性指的是整个事件元素，因此计算时会算上 padding 的值。

page x | y

page 指的是当前事件触发位置相对于文档左上角的坐标，由于该值是相对于整个文档流的坐标，因此即使发生滚动，该值也按照原先的原点进行计算

screen x | y

screen 指的是当前事件触发位置相对于你的整个显示器(电脑屏幕)左上角的坐标，因此该值会根据你浏览器窗口的位置改变而发生改变。

特殊事件的 event

movement x | y

movement 是 mousemove 事件特定的属性，只有在 mousemove 中能够具有有效值。它指的是当次鼠标移动位置与上一次鼠标移动位置的大小，向右移动为正值，向左为负值，以此类推。

delta x | y | z

delta 是鼠标滚轮事件的特定属性，只有鼠标滚轮时才具有有效值。该值指的是鼠标的滚动量，该值具有正负，因此可以用来表示滚动的方向。

一个小案例

拖拽案例

const box = document.getElementById('box');
let moving = false;
let xBuffer = 0;
let yBuffer = 0;

document.addEventListener('mousedown', (e) => {
    if (moving && e.target.id !== 'box') {
        return;
    }
    const { left, top } = box.style;
    const { clientX, clientY } = e;
    moving = true;
    xBuffer = clientX - Number(left.substr(0, left.indexOf('px')));
    yBuffer = clientY - Number(top.substr(0, top.indexOf('px')));
});

document.addEventListener('mousemove', (e) => {
    if (!moving) {
        return;
    }
    box.style.left = (e.clientX - xBuffer) + 'px';
    box.style.top = (e.clientY - yBuffer) + 'px';
});

document.addEventListener('mouseup', (e) => {
    if (!moving) {
        return;
    }
    moving = false;
});