鼠标 event 中的各种 X 与 Y

event 中的各种 X 与 Y

初学者在使用鼠标事件监听器时,总会搞混 X 与 Y 的作用与含义,这篇文章便来仔细讲讲这方面的知识。

client x | y

client 指的是当前事件触发位置相对于浏览器左上角的坐标,由于该值是相对于浏览器的坐标,因此如果绑定的元素滚动则该值会因为页面的滚动导致该值的计算原点改变,从而导致结果不同。

layer x | y

layer 指的是当前事件触发位置相对于其具有定位元素的父元素的左上角的坐标,如果找不到父元素则以 body 的左上角为原点。

offset x | y

offset 指的是当前事件触发位置相对于事件元素的坐标,并且由于该属性指的是整个事件元素,因此计算时会算上 padding 的值。

page x | y

page 指的是当前事件触发位置相对于文档左上角的坐标,由于该值是相对于整个文档流的坐标,因此即使发生滚动,该值也按照原先的原点进行计算

screen x | y

screen 指的是当前事件触发位置相对于你的整个显示器(电脑屏幕)左上角的坐标,因此该值会根据你浏览器窗口的位置改变而发生改变。

特殊事件的 event

movement x | y

movement 是 mousemove 事件特定的属性,只有在 mousemove 中能够具有有效值。它指的是当次鼠标移动位置与上一次鼠标移动位置的大小,向右移动为正值,向左为负值,以此类推。

delta x | y | z

delta 是鼠标滚轮事件的特定属性,只有鼠标滚轮时才具有有效值。该值指的是鼠标的滚动量,该值具有正负,因此可以用来表示滚动的方向。

相关推荐
JefferyXZF23 分钟前
Next.js 初识:从 React 到全栈开发的第一步(一)
前端·全栈·next.js
一只韩非子1 小时前
AI时代,程序员如何优雅地搞定页面设计?
前端·ai编程
新中地GIS开发老师1 小时前
2025Mapbox零基础入门教程(14)定位功能
前端·javascript·arcgis·gis·mapbox·gis开发·地理信息科学
tager1 小时前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
烛阴2 小时前
Int / Floor
前端·webgl
excel2 小时前
使用 PWA 时,为什么你必须手动添加更新逻辑,否则会报错?
前端
Moment2 小时前
Node.js 这么多后端框架,我到底该用哪个?🫠🫠🫠
前端·后端·node.js
尚学教辅学习资料2 小时前
SpringBoot3.x入门到精通系列: 2.3 Web开发基础
前端·springboot·web开发
han_3 小时前
前端遇到页面卡顿问题,如何排查和解决?
前端·javascript·性能优化
拾光拾趣录4 小时前
H5适配9大高频题连环炸!第3问90%人翻车?
前端·面试