function getEventPosition(event) { //检测是否是触摸屏设备 let _isTouch = (function () { return navigator.maxTouchPoints > 0; })(); // 使用 getBoundingClientRect() 获取更精确的位置 const rect = canvas.getBoundingClientRect(); let _eventClientObj = event; if (_isTouch) { _eventClientObj = event.touches[0]; } const x = _eventClientObj.clientX - rect.left; const y = _eventClientObj.clientY - rect.top; //console.log(x, y, _eventClientObj.clientX, rect.left, event);
getBoundingClientRect() 是一个用于获取元素位置和尺寸信息的重要方法2。
核心功能
它返回一个DOMRect对象，包含以下关键属性23：
x / left：元素左边界相对于视口左侧的距离y / top：元素上边界相对于视口顶部的距离width：元素的宽度height：元素的高度right：元素右边界相对于视口左侧的距离bottom：元素下边界相对于视口顶部的距离const box = document.getElementById('box');
const rect = box.getBoundingClientRect();
console.log(rect.width); // 元素的宽度
console.log(rect.height); // 元素的高度
console.log(rect.top); // 元素上边界相对于视口顶部的距离
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。