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

相关推荐
秋名山大前端6 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug6 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn6 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636026 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4166 小时前
HTML(面试)
前端
excel6 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴6 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy6 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者7 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王7 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html