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

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

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

1. pageX

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

2. clientX

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

3. offsetX

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

4. movementX

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

相关推荐
baiduopenmap4 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish12 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i24 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_26 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun32 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网