个人博客 个人博客
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

董先亮

前端react开发
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 高德地图接入
  • 以鼠标为中心缩放
  • 银行卡号验证
  • 前端规范化
  • 二维码与条形码
  • 监控设备接入
  • 获取鼠标位置坐标
    • 获取相对于“触发事件的元素”的坐标
    • 获取相对于屏幕的坐标
    • 获取相对于浏览器可视区域的坐标
    • 参考:
  • node、npm关系
  • node-sass版本问题
  • html实现拖拽
  • npm发包
  • rullup打造工具库
  • 九宫格拖拽
  • 前端项目审核
  • 多次引用相同文件的打包问题
  • 前端面试题
  • websocket即时通讯
  • 前端专题
NeverStop1024
2022-09-23
目录

获取鼠标位置坐标

# 获取相对于“触发事件的元素”的坐标

通过 event 对象的 offsetX 和 offsetY 可以获取到鼠标相对于当前所指向对象的坐标。

window.addEventListener('mousemove',event => {
    //获取相对于当前所指向元素的位置坐标
    console.log(xiangevent.offsetX,event.offsetY)
})
1
2
3
4

# 获取相对于屏幕的坐标

通过 event 对象的 screenX 和 screenY 可以获取屏幕坐标(包括上面浏览器工具栏标签页)

# 获取相对于浏览器可视区域的坐标

通过 event 对象的 clientX 和 clientY 可以获取鼠标相对于浏览器视口(即滚动条之外的部分忽略掉)的坐标。

# 参考:

  • JS - 获取鼠标的位置坐标(相对于元素、屏幕、窗口、整个文档) (opens new window)
编辑 (opens new window)
上次更新: 2022/09/23
监控设备接入
node、npm关系

← 监控设备接入 node、npm关系→

最近更新
01
mock使用
07-12
02
websocket即时通讯
07-12
03
前端面试题
07-09
更多文章>
Theme by Vdoing | Copyright © 2022-2023 NeverStop1024 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式