js 获取节点相对于屏幕的坐标位置,获取节点的宽高,获取鼠标事件回调的鼠标位置,计算鼠标相对于某个节点下的坐标

获取节点相对于屏幕的坐标位置:

document.getElementById('svgBoxId').getBoundingClientRect()

获取节点的宽高:

document.getElementById('svgBoxId').offsetWidth
document.getElementById('svgBoxId').offsetHeight

获取鼠标事件回调的鼠标位置:

javascript 复制代码
var mouseX = event.pageX;
  var mouseY = event.pageY;
  console.log('鼠标位置:', mouseX, mouseY);

计算鼠标相对于某个节点下的坐标:

鼠标位置 - 节点位置

注意:都是相对于屏幕的位置。

相关推荐
SmoothSailingT1 天前
C/C++与C#——指针的作用
开发语言·c++·c
Yan-英杰1 天前
从Free Tier到Serverless:用亚马逊云科技打造零门槛AI应用
服务器·开发语言·科技·ai·大模型
hugh_oo1 天前
100 天学会爬虫 · Day 11:如何合理控制爬虫请求频率?让访问行为更像真人
开发语言·爬虫·python
JIngJaneIL1 天前
基于java+ vue建筑材料管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
Gazer_S1 天前
【Vue Router 路由守卫(Navigation Guards)指南:概念、执行顺序、beforeResolve、异步路由组件】
前端·javascript·vue.js
半梅芒果干1 天前
vue3 新建文件store自动导入
开发语言·前端·javascript
Tony Bai1 天前
Go 1.26 新特性前瞻:从 Green Tea GC 到语法糖 new(expr),性能与体验的双重进化
开发语言·后端·golang
玖笙&1 天前
✨万字解析解析:Vue.js优雅封装级联选择器组件(附源码)
前端·javascript·vue.js·前端框架
烟袅1 天前
深入理解 React 中 useState 与 useEffect
前端·javascript·react.js
悟能不能悟1 天前
Java 中将 List 中对象的某一列转换为 Set
java·开发语言·list