移动端 area 热点失效主因是浏览器将触摸识别为滑动手势而非点击，需在 <img> 上设置 touch-action: manipulation；<area> 不支持 CSS，href 必须为有效 URL（如 ./page.html#detail），坐标偏移时优先用 SVG 替代。
移动端点击 area 热点没反应，或滑动图片时误触发热点跳转，本质不是 JS 绑定问题，而是浏览器把触摸事件当成了“滑动手势”而非“点击”，area 默认不参与手势分发流程。
touch-action: manipulation 必须加在 <img> 上
很多人给 area 加 touch-action，但无效——area 是不可渲染元素，不接收任何 CSS 样式。真正起作用的是包裹它的 <img> 元素。
-
touch-action: manipulation告诉浏览器：“这个图片区域只做点击/双击，别拿去滚动或缩放” - 不加它，iOS Safari 会优先捕获 touchstart → touchmove → 判定为滑动手势，直接跳过
area的点击逻辑 - 加在
<map>或<area>上完全无效，CSS 不会应用到这些元素 - 示例写法：
<img src="map.png" usemap="#regions" style="touch-action: manipulation;">
href 值必须是有效 URL，不能只写 #id
移动端 Safari 和 Chrome 对 area 的 href 解析更严格：纯 #detail 会被当成空链接或相对路径请求，导致控制台报 Failed to load resource，点击静默失败。
- ✅ 正确写法：
href="./page.html#detail"或href="javascript:void(0)" - ❌ 错误写法：
href="#detail"（无协议、无路径，移动端基本失效） - 若需锚点跳转，必须确保目标页已加载且 DOM 中存在对应
id，且不要依赖跨页面的usemap复用 -
href="javascript:void(0)"后必须配合 JS 监听click事件，不能只靠onmouseover（移动端不触发）
热区坐标偏移时，别硬调 coords，优先换 SVG
CSS 缩放（如 width: 100%）会让 area 的 coords 坐标严重偏移——因为它是按图片原始像素（naturalWidth）定义的，不是当前渲染尺寸。
立即学习“前端免费学习笔记（深入）”；
- 临时方案：监听
img.onload和window.resize，用img.naturalWidth / img.offsetWidth算缩放比，再遍历所有area.coords手动重算——但 poly 区域坐标多、顺序敏感，极易出错 - 真实项目中，只要热区数量 ≥ 3 或有缩放需求，直接用 SVG 替代：
<svg viewBox="0 0 800 600"><path d="..." @click="handleRegion"/></svg> - SVG 天然支持百分比、响应式、事件冒泡和无障碍属性，
touch-action也生效更稳定 - 工具建议：用 Figma 导出 SVG 路径，而不是从截图里手动量
coords
最常被忽略的一点：如果 <img> 在 <picture> 或 <figure> 内部，usemap 很可能失效——<map> 必须和 <img> 在同一 DOM 上下文，且不能被 Shadow DOM 隔离。
