area标签互不覆盖，浏览器按dom顺序命中首个匹配区域即停止；shape="default"须置末位；coords须符合规则且在图范围内；usemap与map name必须逐字节一致。
area 标签之间会不会互相覆盖或拦截点击？
不会。多个 area 标签在同一个 map 内互不干扰，浏览器按 DOM 顺序从上到下检测点击位置，**命中第一个匹配的区域就停止查找**——不是“取并集”，也不是“z-index 叠加”。所以顺序就是逻辑优先级。
- 如果两个
area坐标完全重叠，上面那个（HTML 中先写的）会响应，下面的永远收不到事件 -
shape="default"必须放在最后，否则它会吃掉所有未被前面区域捕获的点击（包括空白处），导致其他热区看似“失效” - 矩形
area和多边形area即使视觉上相交，只要 coords 不重合，各自独立生效；但自相交的poly（如蝴蝶形）在 Safari 中可能渲染异常或点击不可靠
coords 写错导致 area “消失”或点不准的常见陷阱
坐标写错不会报错，只会静默失效或偏移。关键不是“有没有写”，而是“是否符合 shape 规则 + 是否在原图范围内”。
-
shape="rect"要求coords="x1,y1,x2,y2"，且必须满足x1 且 <code>y1 ；反序（如 <code>"100,100,10,10"）在 Chrome 中仍能工作，但在旧 Edge 中直接忽略 -
shape="circle"的半径必须是正整数，coords="50,50,0"或"50,50,-5"都无效 -
shape="poly"的 coords 总数必须为偶数，"10,20,30,40,50"（5 个数字）会被 Safari 完全跳过；首尾点不用重复闭合（现代浏览器自动连线），但手动重复（如"10,20,30,40,10,20"）也没问题 - 所有 coords 值不能为负数，也不能超过原图尺寸（
img.naturalWidth/naturalHeight），超出部分在多数浏览器中被裁剪处理，但行为不一致
移动端点击无响应？检查热区物理尺寸和 touch-action
iOS Safari 对小面积热区极其敏感，哪怕 coords 算得再准，如果映射到屏幕上的物理尺寸小于 44×44px，触控就大概率失焦。
- 用
img.naturalWidth / offsetWidth比例反推当前热区的屏幕像素尺寸，确保最小边 ≥ 44 - 给
img加style="touch-action: manipulation;"，可消除 300ms 点击延迟，并提升触控命中率 - 避免在
img或其父容器上设置pointer-events: none或opacity: 0—— 这会让整个热区链路中断，且控制台不报错 - 真机测试比模拟器更可靠：Chrome DevTools 的 device emulation 无法准确复现 iOS 的 touch target 判定逻辑
为什么改了 coords 却没变化？usemap 关联失败是最可能原因
90% 的“area 不生效”问题根本不在 coords，而在 usemap 和 map name 匹配失败。浏览器不提示、不报错，只让热区彻底静默。
-
<img usemap="#floor-plan">和<map name="floor-plan"></map>必须逐字节一致：大小写、连字符、空格、#号缺一不可 -
<map></map>必须是的直接子节点或同级可渲染位置；放进<div id="wrapper"> 里没问题，但放进 <code><picture></picture>、<figure></figure>或 Shadow DOM 就断连 - 调试时右键图片 → “检查”，看开发者工具能否高亮对应
<map></map>；不能高亮 = 关联失败 - 临时加
style="outline: 2px solid red"到img，再用“Toggle element screenshot”功能叠加查看 coords 是否对齐原始图像
实际项目里最麻烦的从来不是写几个
area，而是让它们在缩放、换设备、换浏览器时都稳定响应。coords 是静态的，但用户看到的图是动态的——这点不靠 JS 补位，光靠 HTML 就注定要妥协。
