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博客

你可能感兴趣的:(javascript,计算机外设,学习)