前端 CSS 经典：鼠标位置信息

前言：当监听鼠标事件时，需要了解鼠标属性所代表的位置信息

dom.addEventListener("click", (e) => {
  e.pageX;
  e.clientX;
  e.offsetX;
  e.movementX;
});

1. pageX

表示鼠标距离整个页面左边缘的距离，就算有滚动条，最左边看不到了，也是到那边的距离。

2. clientX

表示鼠标相对于视口左边的距离，视口就是能看见的地方。

3. offsetX

表示鼠标距离事件源左边缘的距离

4. movementX

表示这一次鼠标事件距离上一次鼠标事件横向上的偏移量