鼠标事件

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

查看更多JavaScript事件

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

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

事件重叠。当您追踪一个click事件,就像跟踪mousedown跟一个mouseup事件。如果是dblclickclick也被解雇了两次。

mousedownmousemovemouseup可以组合使用以跟踪拖放事件。

小心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初学者手册


更多浏览器教程: