area标签点击事件中必须调用e.preventDefault()阻止跳转，因nohref已废弃且href存在时必触发默认行为；需用addEventListener绑定，避免return false或漏传事件参数；href设为#或空字符串仍会滚动至顶部，应移除href或用javascript:void(0)配合preventDefault；移动端失效常因coords未按原图尺寸、热区过小或usemap/name不匹配所致。
area 标签 click 事件中必须调用 e.preventDefault()
area 本身没有原生的「阻止跳转」属性（nohref 已废弃且多数浏览器不生效），点击后只要 href 存在，就会触发默认跳转或锚点滚动。唯一可靠方式是在 JS 事件监听中显式阻止——和 a 标签一样，但要注意 area 无法直接绑定内联 onclick，必须用 addEventListener。
常见错误是只写 return false 或漏掉事件对象参数，导致阻止失败：
-
return false在事件监听函数中无效（仅对 DOM0 级内联 handler 生效） - 没传参如
(e)，后续无法调用e.preventDefault() - 监听了
map而非具体area，事件冒泡未被拦截
确保事件绑定到正确的 area 元素上
area 是 void 元素，不能包裹内容，也不支持 id 直接写在 HTML 里再用 getElementById——容易因加载顺序或重复 ID 出错。推荐用 document.querySelectorAll('map[name="xxx"] area[href]') 批量绑定，或给 area 加 data-role 属性做区分。
示例（安全写法）：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('map[name="product-map"] area').forEach(area => {
area.addEventListener('click', e => {
e.preventDefault(); // 必须第一行执行
console.log('热区被点击，但未跳转');
// 后续自定义逻辑，比如 showDetail(area.dataset.id)
});
});
href 值为 # 或空字符串时仍会跳转顶部
很多人以为写 href="#" 或 href="" 就等于“无跳转”，实际会导致页面滚动到顶部（尤其在移动端 Safari 中更明显）。这不是 bug，是浏览器对无效 href 的兜底行为。
正确做法只有两个：
- 移除
href属性（<area shape="rect" coords="...">），然后靠 JS 控制交互 - 保留
href但设为javascript:void(0)，再配合e.preventDefault()双保险
注意：href="javascript:void(0)" 在部分旧版 iOS WebView 中可能报错，生产环境建议优先选「移除 href」方案。
移动端点击区域失效或响应延迟的隐藏原因
area 热区在移动设备上常出现点击无反应，根本原因不是 JS，而是：
- coords 坐标未按图片原始尺寸书写，缩放后热区偏移（
area不响应 CSS 缩放） - 热区面积过小（iOS 要求最小 44×44px，Android 推荐 ≥48px）
- 父级
map或img缺少usemap/name匹配，导致 area 完全不注册
调试时可临时加 style="outline: 2px solid red" 到 area 上看是否渲染成功（虽然 outline 不生效，但能快速验证选择器是否命中）；更稳妥的长期方案是改用 SVG 热区替代 map+area。
