鼠标事件是最常用的一类事件,包括
- click: 单击鼠标左键或按下回车键时触发
- mousedown:按下任意鼠标按键时触发
- mouseup: 松开鼠标按键时触发
- mouseenter: 鼠标光标从元素外部首次移动到元素范围之内时触发,和mouseover不同的是,mouseenter在光标移动到后代元素上时不会触发
- mouseover: 鼠标指针从元素外部移动到元素边界之内时触发,光标移动到后代元素上也会触发
- dbclick:双击鼠标左键
客户区坐标位置
事件对象的clientX
和clientY
属性,分别表示事件发生时鼠标指针在视口,即可视区域内的水平和垂直坐标
页面坐标位置
事件对象的pageX
和pageY
属性,分别表示事件发生时鼠标光标在页面中的位置。
如果页面没有滚动,那么pageX
和pageY
的值与clienX
和clientY
的值相同
如果页面发生了滚动,event.pageY === document.documentElement.scrollTop + event.clientY
注:如何获取一个元素的位置
可以用element.getBoundingClientRect()
如果要获取鼠标事件相对与一个元素的位置,可以用
var rect = element.getBoundingClientRect()
var x = event.pageX - rect.x
var y = event.pageY - rect.y
屏幕坐标位置
screenX
和screenY
属性分别表示事件发生时鼠标指针相对于整个屏幕的坐标位置