shape="default" 仅在其他 area 全未命中时触发，且必须置于 map 内所有 area 之后、href 为有效 URL（如 ./index.html），误加 coords 或前置 area 坐标错误会导致其失效；移动端响应区域小且易被过滤，推荐用 JS 方案替代。
area shape="default" 为什么点了没反应
浏览器只在所有其他 area 都未命中时，才触发 shape="default" 区域；但它不支持 href 跳转到页面内锚点（如 #section1），也不处理空 href 或仅含 # 的值。常见现象是点击图片空白处无反馈，控制台也无报错。
必须满足两个条件才能让 default 生效：
-
href值得是完整 URL，比如href="./index.html"或href="javascript:void(0)" - 该
area必须放在<map>内所有其他area之后——顺序影响命中逻辑
default 热区和 poly/rect/circle 混用时的坐标陷阱
shape="default" 不需要 coords 属性，但一旦你误加了 coords（哪怕只是空字符串），部分浏览器（如 Safari）会直接忽略这个 area，导致“兜底”失效。
更隐蔽的问题是：如果前面某个 poly 的 coords 坐标写错（比如奇数个数值、含空格或负数），它可能渲染异常甚至覆盖整张图，把 default 区域完全挤掉。调试时建议临时给每个 area 加 style="outline: 1px solid red" 查看实际生效范围。
立即学习“前端免费学习笔记（深入）”；
移动端 default 热区点击失败的常见原因
在 iOS Safari 和 Android Chrome 上，default 热区默认响应区域极小——不是整张图，而是未被其他 area 显式覆盖的像素点集合，且触控精度受限。若图片缩放后显示尺寸变小，这个“剩余区域”可能小于 44×44px，系统直接过滤点击。
可行解法：
- 避免依赖
default做主操作，改用一个显式的poly覆盖整个图片（coords="0,0,1200,0,1200,800,0,800"，数值按原始图宽高填） - 为
img添加style="touch-action: manipulation"，提升触控响应灵敏度 - 真机测试前，先用
console.log(event.target)确认点击事件是否真的落到img上
替代 default 的轻量 JS 方案
原生 default 兼容性差、行为不可控，实际项目里更推荐用 JS 补位：
监听 img 的 click 事件，用 event.offsetX/event.offsetY 计算点击位置，再遍历所有 area 的 coords 判断是否在任一热区内；不在则执行兜底逻辑。这样既绕过 default 的限制，又能统一控制跳转、埋点或动画反馈。
注意：需同步处理图片缩放比（用 img.naturalWidth / img.offsetWidth 校正坐标），否则响应区域会偏移。
最常被忽略的是——default 不是“安全网”，它是被浏览器按规则筛选后的最后选项；一旦前面任意 area 坐标溢出或格式错误，它就可能彻底失联。
