90%的触摸失效源于usemap与name未逐字节匹配、coords按缩放后尺寸填写或缺失href/alt；必须严格配对（含#、大小写）、基于naturalWidth/Height计算坐标，并添加touch-action确保响应。
<map> 和 <area> 在触摸设备上点击失效，90% 是因为 usemap 与 name 不匹配、coords 按缩放后尺寸填写、或缺失必要属性——不是 JS 问题，是 HTML 结构和坐标逻辑错了。
usemap 和 map name 必须逐字节严格匹配
浏览器不报错，但错一个字符就整个热区静默失效。常见翻车点：
-
usemap="product-map"缺#前缀 → 完全不绑定 -
<map name="Product-Map">和usemap="#product-map"大小写不一致 → 无效 -
<map>被包在<picture>或<div style="display:none">里 → 不在文档流中，无法关联 - name 中含空格或中文（如
name="楼层 平面图"）→ 解析失败
调试方法：右键图片 →「检查」，看是否能高亮对应 <map>；若不能，先改 name 和 usemap 为纯小写+短横线，例如 usemap="#floor-plan" + <map name="floor-plan">。
coords 必须基于原始图片像素，不是 CSS 渲染尺寸
你用 img { width: 50%; height: auto; } 把一张 1600×900 的图缩成 400×225 显示，<area shape="rect" coords="0,0,200,150"> 依然按 1600×900 算——结果热区只覆盖左上角 1/16，点不到。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 用
img.naturalWidth/img.naturalHeight读原始尺寸 - 用
img.offsetWidth/img.offsetHeight读当前渲染尺寸 - 计算缩放比：
scaleX = offsetWidth / naturalWidth，scaleY = offsetHeight / naturalHeight - 对每个
<area>动态重写coords：矩形乘 4 个值，圆形缩放圆心+半径，多边形逐对处理
监听事件必须覆盖加载和缩放：img.addEventListener('load', updateCoords) + window.addEventListener('resize', updateCoords)。
area 标签必须含 href 和 alt 才真正可用
只写 <area shape="rect" coords="..." onclick="doSomething()">，在 iOS Safari 和部分安卓 WebView 中会点击无响应、无手型光标、键盘不可聚焦。
原因：缺少语义，浏览器不认为它是可交互元素。
必须项：
-
href：哪怕只是href="javascript:void(0)"或href="#"（注意：后者需event.preventDefault()阻止跳顶） -
alt：非可选，是 WCAG 强制要求，内容要具体，如alt="点击查看厨房布局"
现代推荐写法（事件委托）：
document.querySelector('map').addEventListener('click', e => {
if (e.target.tagName === 'AREA') {
e.preventDefault();
handleAreaClick(e.target);
}
});
移动端触摸点击无反应？先加 touch-action
即使结构、坐标、属性都对，iOS Safari 和部分安卓 WebView 仍可能忽略非 <a> 或 <button> 元素的轻触，尤其当区域小或父容器有 overflow: hidden 时。
解决方法很简单，在图片或其直接父容器上加：
style="touch-action: manipulation;"
同时检查所有上级元素是否误设了 pointer-events: none——只要有一层生效，整个子树点击就废。
最后真机验证不可跳过：模拟器不反映 DPR、触摸采样延迟、字体渲染差异，很多“看起来对”的热区在 iPhone 上偏移 10px 就点不中。
