vue中鼠标事件

vue中鼠标事件

鼠标事件是最常用的一类事件，包括

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属性分别表示事件发生时鼠标指针相对于整个屏幕的坐标位置

作者：C脖子
链接：https://www.jianshu.com/p/a7dac0a6016f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。