js 鼠标事件总结

当监听鼠标事件时，会触发一些事件，我们可以与之交互：

• mousedown 按下鼠标按钮触发
• mouseup 鼠标按钮被释放
• click 点击事件
• dblclick 双击事件
• mousemove 当鼠标移动到元素上时，鼠标移动
• mouseover 当鼠标移动到一个元素或它的一个子元素上时，鼠标悬停。
• mouseenter 当鼠标移动到一个元素上时，鼠标进入。类似于mouseover但不冒泡。
• mouseout 当鼠标移出元素时，以及当鼠标进入子元素时。
• mouseleave 当鼠标移出一个元素时，mouseleave。类似于mouseout但不冒泡。
• contextmenu 快捷菜单当快捷菜单打开时，例如用鼠标右键点击

事件重叠。当您跟踪一个单击事件时，就像跟踪一个mousedown跟着一个mouseup事件一样。在dblclick的情况下，还会触发两次click。

mousedown、mousemove和mouseup可以结合使用来跟踪拖放事件。

小心使用mousemove，因为它在鼠标移动时多次触发。我们需要应用节流，这是我们在分析滚动时会详细讨论的东西。

在事件处理程序中，我们可以访问很多事件属性。

例如，在鼠标事件中，我们可以通过检查事件对象的button属性来检查哪个鼠标按钮被按下:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // mouse button pressed
  console.log(event.button) //0=left, 2=right
})

下面是所有我们可以使用的属性：

• altKey 如果事件触发时按下alt键，则altKey为真。
• button 如果有按钮，则为鼠标事件触发时按下的按钮数目(通常为0 =主按钮，1 =中按钮，2 =右按钮)。处理由单击按钮引起的事件(例如单击)。
• buttons 按钮(如果有)，表示在任何鼠标事件上按下的按钮的数字。
• clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标。
• ctrlKey 如果在事件触发时按下ctrl键，则ctrlKey为真。
• metaKey 如果事件触发时按下了meta键，则metaKey true。
• movementX / movementY movementX / movementY鼠标指针相对于最后一个mousemove事件的位置的x和y坐标。
• region Canvas API中使用的区域。
• relatedTarget relatedTarget事件的辅助目标，例如在移动时。
• screenX / screenY 屏幕坐标中鼠标指针的x和y坐标。
• shiftKey 如果在触发事件时按下shift键，则shiftKey为true。