鼠标事件

探索在JavaScript中处理鼠标事件的基础

查看更多JavaScript事件

在查看鼠标事件时，我们可以与之交互

mousedown按下鼠标按钮
mouseup释放鼠标按钮
click点击事件
dblclick双击事件
mousemove当鼠标移到元素上时
mouseover当鼠标移到一个元素或其子元素之一上时
mouseenter当鼠标移到元素上时。如同mouseover但不会冒泡（稍后会详细介绍！）
mouseout当鼠标移出元素时，以及当鼠标进入子元素时
mouseleave当鼠标移出元素时。如同mouseout但不会冒泡（稍后会详细介绍！）
contextmenu打开上下文菜单时，例如，在鼠标右键上单击

事件重叠。当您追踪一个click事件，就像跟踪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键，则为true
button如果有的话，则触发鼠标事件时按下的按钮编号（通常为0 =主按钮，1 =中间按钮，2 =右键）。对通过单击按钮引起的事件起作用（例如，单击）
buttons如果有的话，一个数字，指示在任何鼠标事件上按下的按钮。
clientX/clientY鼠标指针相对于浏览器窗口的x和y坐标，与滚动无关
ctrlKey如果在触发事件时按了ctrl键，则为true
metaKey如果触发事件时按下了meta键，则返回true
movementX/movementY鼠标指针相对于上一个mousemove事件的位置的x和y坐标。用于在移动鼠标时跟踪鼠标速度
region在Canvas API中使用
relatedTarget事件的次要目标，例如移动时
screenX/screenY屏幕坐标中鼠标指针的x和y坐标
shiftKey如果在触发事件时按下了Shift键，则为true

免费下载我的JavaScript初学者手册

鼠标事件

探索在JavaScript中处理鼠标事件的基础

更多浏览器教程：