getboundingclientrect()返回元素相对于视口的像素级真实渲染矩形，含left、top、width、height，实时响应缩放、滚动与动画，比offset系列更精准。
用 getBoundingClientRect() 看元素真实渲染尺寸和位置
元素的“可点击区域”不等于它写的 width/height，也不等于 offsetWidth/offsetHeight——尤其当有 transform、scale、border-box 混用或 overflow: hidden 时，视觉上能点到的地方和 DOM 计算出的框可能差很远。
最可靠的方式是调用 element.getBoundingClientRect()，它返回的是浏览器实际绘制后、相对于视口的像素级矩形框（含 left、top、width、height）。
- 该值会实时响应缩放、滚动、CSS 动画等变化，比
offsetLeft/Top更准 - 若元素被父容器
clip-path或mask裁剪，getBoundingClientRect()仍返回完整框，需额外判断是否在可视范围内（比如结合element.isIntersecting或手动计算 scroll 偏移） - 移动端要注意：Safari 对
getBoundingClientRect()在 fixed 容器内的处理略有差异，建议加一层element.offsetParent判断是否脱离文档流
检查 <area> 热区是否对齐图片像素坐标
使用 <map></map> + <area> 时，coords 是基于原始图片像素坐标的，不是 CSS 渲染后的尺寸。一旦图片被拉伸（比如 img { width: 100%; height: auto; }），热区就必然错位。
- 必须确保
<img>的width和height属性值与原图分辨率一致（如<img src="map.png" style="max-width:90%" style="max-width:90%">），不能只靠 CSS 控制大小 - 如果必须响应式，得用 JS 动态重算
coords：监听resize，用img.naturalWidth / img.clientWidth算出缩放比，再乘回所有<area>的coords -
shape="default"区域不会自动适配缩放，它始终覆盖整个原始图片区域，这点容易被忽略
Canvas 内部图形的点击检测常失效，根源在两套坐标系没对齐
Canvas 元素的“可点击区域”由两层决定：一是 DOM 层的 getBoundingClientRect() 返回的视觉框；二是绘图上下文（ctx）内部的逻辑像素坐标系（即 canvas.width/canvas.height）。二者不一致时，鼠标坐标换算就会出错。
- 错误写法：
const x = e.clientX - rect.left直接用于判断圆形点击——这仅适用于未缩放的 Canvas - 正确做法：先确认
canvas.width和canvas.height是否与 CSS 尺寸匹配；如果不匹配，用比例因子校正：const scaleX = canvas.width / rect.width，再算(e.clientX - rect.left) * scaleX - 更稳妥的方式是设置
canvas.style.width = '100%'后，立刻用canvas.width = canvas.offsetWidth动态同步像素尺寸，避免缩放失真
用开发者工具快速验证点击热区边界
别靠肉眼猜，F12 打开开发者工具后，有三个关键操作能立刻暴露真实可点击范围：
- 选中元素后，在 Styles 面板里把
outline: 2px solid red临时加上，看高亮是否贴合你预期的热区 - 右键元素 → “Break on” → “attribute modifications”，然后点一下页面，观察是否触发了
pointer-events或visibility变化（说明有拦截层） - 在 Elements 面板中，把鼠标悬停在
<area>标签上，Chrome 会直接在图上高亮对应热区（前提是<img>已正确绑定usemap）
最容易被忽略的是：父级设置了 pointer-events: none，或者某个遮罩层（比如伪元素 ::before）没有设 pointer-events: auto，导致下层元素完全不可点——这种问题用 getBoundingClientRect() 查不到，必须靠开发者工具逐层关闭样式来排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
