JavaScript获取鼠标点一个元素，获取鼠标点击的元素内的位置

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);    // 元素上边界相对于视口顶部的距离