area标签热区重叠会导致点击失效，后定义的area覆盖前一个，移动端易“点不中”或“误触发”；应按“从大到小、从外到内”声明顺序，避免default，poly需闭合顶点，rect坐标须严格。
area标签热区重叠会导致点击失效
热区重叠不是“功能增强”，而是交互灾难：后定义的area会覆盖前一个（先来先得），但用户根本不知道哪个生效；更糟的是，重叠区域在移动端常出现“点不中”或“误触发”，尤其当两个area都带href时，浏览器只响应最末尾那个，且不报任何提示。
用顺序 + shape + coords 控制热区层级
原生map不支持z-index，唯一可控手段是声明顺序和几何严谨性：
-
area必须按“从大到小、从外到内”书写：比如先写整张图的shape="rect"兜底导航，再写中间按钮区域，最后写图标级小热区 - 避免
shape="default"——它会自动覆盖所有未被其他area覆盖的像素，极易吞掉你精心定义的小区域 - 多边形
shape="poly"顶点数超过50个时，Firefox桌面端悬停检测明显变慢，移动端普遍卡顿，建议拆成多个小poly或改用rect/circle - 用开发者工具实时检查：右键图片 → “检查”，在Elements面板里拖动鼠标看高亮框是否跳变，能快速定位是否被覆盖
coords数值不能靠估算，必须严格闭合与隔离
重叠常源于坐标计算毛糙，而非HTML结构问题：
-
shape="poly"必须手动重复首顶点闭合：coords="10,20,50,20,50,60,10,60,10,20"✅；漏掉末尾10,20❌，浏览器可能将该区域渲染为开放折线，边缘模糊，与其他热区产生隐性交叠 -
shape="rect"要求x1 且<code>y1 ，填反了（如<code>"100,50,10,80"）会导致热区缩成一条线甚至消失，看似“没重叠”，实则坐标解析失败后行为不可控 - 所有
coords值必须基于图片原始尺寸（img.naturalWidth），CSS缩放后若未用JS重算，视觉上“看起来没重叠”，实际点击坐标已漂移，造成伪重叠现象
真正防重叠的底线操作
别依赖肉眼对齐，用可验证动作守住边界：
- 每个
area必须带alt属性，不只是可访问性要求——屏幕阅读器朗读时能帮你确认区域是否被意外覆盖（重复朗读同一段alt说明有重叠） - 给
area加CSS调试样式：area { outline: 2px dashed red; }，真机测试时能直接看到热区轮廓是否交叉 - 禁用
href做临时验证：把疑似重叠的几个area的href暂时删掉，只留alt，然后用console.log(event.target.alt)监听点击，看实际触发的是哪一个 - 复杂热区优先转SVG：SVG的
<path></path>天然支持非重叠布尔运算（fill-rule="evenodd"），比拼凑一堆area可靠得多
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
