JS鼠标事件总结学习

首先我们先简单过一遍鼠标MouseEvent事件：

1. click: 当鼠标单击元素时触发。
2. dblclick: 当鼠标双击元素时触发。
3. mousedown: 当按下鼠标按钮时触发。
4. mouseup: 当释放鼠标按钮时触发。
5. mousemove: 当鼠标指针在元素上移动时触发。
6. mouseover: 当鼠标指针移动到元素上方时触发。
7. mouseout: 当鼠标指针移出元素时触发。
8. contextmenu: 当用户在元素上点击鼠标右键时触发上下文菜单事件。

? ? ?执行顺序：mousedown —> mouseup —> click?

鼠标事件中的有很多属性，用于获取鼠标在不同坐标系下的位置信息，包括但不限于：

• clientX、clientY: 鼠标相对于浏览器窗口客户区域的坐标。
• offsetX、offsetY: 鼠标相对于触发事件的元素的内边距边界的坐标。
• layerX、layerY: 鼠标相对于触发事件的元素的边框边界的坐标（已废弃）。
• pageX、pageY: 鼠标相对于整个页面左上角的坐标。
• screenX、screenY: 鼠标相对于（电脑）屏幕左上角的坐标。

使用场景：

• 当需要获取鼠标相对于页面或浏览器窗口的坐标时，可以使用pageX和pageY。
• 当需要获取鼠标相对于触发事件的元素的坐标时，可以使用clientX和clientY或者offsetX和offsetY。
• 当需要获取鼠标相对于屏幕的坐标时，可以使用screenX和screenY。

?代码示例：

document.addEventListener('mousemove', function(event) {
  console.log('pageX: ' + event.pageX + ', pageY: ' + event.pageY);
  console.log('clientX: ' + event.clientX + ', clientY: ' + event.clientY);
  console.log('offsetX: ' + event.offsetX + ', offsetY: ' + event.offsetY);
  console.log('screenX: ' + event.screenX + ', screenY: ' + event.screenY);
});

推荐博文：

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_js event layery-CSDN博客