本文目标:了解在JavaScript中使用鼠标事件的基本知识。
当监听鼠标事件时,会触发一些事件,我们可以与之交互:
- 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。