area标签href为空会直接失效，必须填合法url如javascript:void(0)；nohref需配合pointer-events:none和tabindex="-1"才能真正禁用交互；热区失灵常因coords与缩放后图片尺寸不匹配。
area 标签 href 为空会直接失效，不是“不跳转”，而是不触发任何导航行为
浏览器对 area 的 href 属性校验极严：值为空字符串（href=""）、仅空格（href=" "）或纯 #，都会被忽略，点击后无反应——既不跳转、不滚动、也不报错。这不是兼容性问题，而是 HTML5 规范明确要求：href 必须为有效 URL。控制台看不到错误，Network 面板也无请求，容易误判为“JS 没绑上”或“CSS 禁用了 pointer-events”。
必须填合法 URL，javascript:void(0) 是最常用且稳妥的占位写法
想让热点区域可点击但不跳转，href 值不能空，也不能只写 # 或 #id（area 不支持纯锚点跳转）。实际可用的最小合法值包括：
-
href="javascript:void(0)"：语义清晰，不触发导航，无历史记录污染 -
href="about:blank"：更干净，不执行 JS，但老 IE 支持弱；若 CSP 策略禁用javascript:，这是首选 -
href="./#"或href="?dummy"：相对路径+查询参数，确保是合法 URL，但会触发页面重载（慎用）
注意：href="#top" 在 area 中无效，哪怕页面有 id="top" 元素，也不会滚动。
用 nohref 属性无法真正禁用交互，它只是声明“该区域不参与链接映射”
nohref 是布尔属性，写上即生效，但它只告诉浏览器“这个 area 不属于当前 map 的可点击区域”，并不阻止事件冒泡或默认行为。常见误区：
- 写了
nohref还能点？——可能父级map或img绑了全局 click 监听器 - 写了
nohref但光标仍是手型？——因为没配style="pointer-events: none;" - 键盘用户仍能聚焦？——需加
tabindex="-1"
真正禁用交互，得组合处理：nohref + style="pointer-events: none;" + tabindex="-1"。
移动端热区太小或坐标未适配缩放，会导致点击失灵，和 href 无关但常被混淆
很多“href 写对了却点不动”的问题，根源不在 href 值本身，而在 coords 坐标与图片渲染尺寸不匹配。尤其当图片用 CSS 缩放（如 width: 100%）时，area 的坐标仍按原始像素计算，热区会严重偏移或缩小到不可点。
- 最小热区建议 ≥ 44×44px（符合 iOS/Android 触控规范）
- 若图片响应式缩放，必须用 JS 动态重算
coords，或改用 SVG 替代map+area - 检查
shape和coords是否匹配：矩形要 4 个数、圆形要 3 个、多边形坐标数必须为偶数
这类问题在桌面端可能正常，一到手机就失效，排查时别只盯着 href。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
