1. 犀牛前端部落首页
  2. JavaScript百科

js 鼠标事件总结

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

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。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3290.html

发表评论

登录后才能评论