js鼠标事件总结

本文的目标：了解在JavaScript中使用鼠标事件的基础知识。

监听鼠标事件会触发我们可以与之交互的几个事件：

• 按下鼠标按钮时触发
• 释放鼠标按钮时触发鼠标向上
• click 单击事件
• 双击 双击事件
• 鼠标移动 鼠标在元素上移动
• mouseover当鼠标移动到某个元素或其子元素之一上时。
• mouseenter 当鼠标移到某个元素上时，鼠标进入。与鼠标悬停类似，但没有气泡。
• 当鼠标移出元素以及鼠标进入子元素时，鼠标移出。
• mouseleave 当鼠标移出元素时，mouseleave。与 Mouseout 类似，但没有气泡。
• 上下文菜单 快捷菜单 当快捷菜单打开时，例如通过右键单击

事件重叠。当您跟踪单击事件时，就像跟踪 mousedown 和 mouseup 事件一样。对于 dblclick，还会触发两次单击。

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

请小心 Mousemove，因为当鼠标移动时它会触发多次。我们需要应用节流，这是我们在分析卷轴时将详细讨论的内容。

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

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

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

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

• AltKey 如果在事件触发时按下 Alt 键，则 altKey 为 true。
• Buttons 如果有按钮，这是触发鼠标事件时将按下的按钮数量（通常 0 = 主按钮，1 = 中按钮，2 = 右键）。处理由单击按钮（例如单击）引起的事件。
• 按钮 按钮（如果有）表示每个鼠标事件上按下按钮的次数。
• clientX / clientY 鼠标指针相对于浏览器窗口的 x 和 y 坐标，无论是否滚动。
• ctrlKey 如果事件触发时按下 ctrl 键，则 ctrlKey 为 true。
• metaKey 如果在事件触发时按下元键，则 metaKey true。
• movementX / movingY movingX / movingY 鼠标指针位置相对于上一个 mousemove 事件的 x 和 y 坐标。
• Region Canvas API 中使用的区域。
• latedTarget 相关目标事件的次要目标，例如移动时。
• screenX / screenY 鼠标指针的 x 和 y 坐标以及屏幕坐标。
• shiftKey 如果在事件触发时按下 Shift 键，则 shiftKey 为 true。