前端 CSS 经典:鼠标位置信息

**前言:**当监听鼠标事件时,需要了解鼠标属性所代表的位置信息

javascript 复制代码
dom.addEventListener("click", (e) => {
  e.pageX;
  e.clientX;
  e.offsetX;
  e.movementX;
});

1. pageX

表示鼠标距离整个页面左边缘的距离,就算有滚动条,最左边看不到了,也是到那边的距离。

2. clientX

表示鼠标相对于视口左边的距离,视口就是能看见的地方。

3. offsetX

表示鼠标距离事件源左边缘的距离

4. movementX

表示这一次鼠标事件距离上一次鼠标事件横向上的偏移量

相关推荐
Bacon9 分钟前
前端:从0-1实现一个脚手架
前端
Bacon11 分钟前
前端项目部署实战 nginx+docker持续集成
前端
beckyye16 分钟前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东23326 分钟前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump68030 分钟前
手写事件总线、事件总线可能带来的内存泄露问题
前端
岁月宁静1 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐1 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
#做一个清醒的人1 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪1 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
浩男孩1 小时前
🍀继分页器组件后,封装了个抽屉组件
前端