能共存，但 href 优先触发导致 onclick 可能失效；需用 return false 阻止默认跳转或改用 javascript:void(0)；coords 必须严格匹配 shape 规则；移动端需监听 touchstart 并加 role="button" 和 tabindex="0"；键盘操作需支持 tab 聚焦及 enter/space 触发。
map 标签里 area 的 href 和 onclick 能不能共存
能，但要注意执行顺序和默认行为干扰。浏览器会优先触发 href 跳转，导致 onclick 里的 JS 逻辑可能没机会执行，或者刚执行完就页面跳走了。
常见错误现象：onclick="doSomething();" 看似写了，点击后却没反应——其实是跳转太快，控制台都来不及输出日志。
- 用
return false阻止默认跳转：<area shape="rect" coords="0,0,100,100" href="#" onclick="alert('clicked'); return false;"> - 更稳妥的做法是去掉
href，只靠 JS 控制行为：<area shape="rect" coords="0,0,100,100" onclick="handleClick('zone1')"> - 如果需要语义化链接（比如 SEO 或无障碍），用
href="javascript:void(0)"并确保onclick返回false，否则部分旧版 IE 可能报错
coords 坐标写错导致热区点不中
coords 是纯数字序列，顺序和 shape 强绑定，写错一个数、多一个逗号、少一对值，整个热区就失效或偏移。
使用场景：图片尺寸变化后没同步更新 coords，或从设计稿量坐标时单位搞混（px vs %）。
-
shape="rect"→ 必须且仅需 4 个值：left,top,right,bottom（注意不是宽高） -
shape="circle"→ 3 个值：centerX,centerY,radius -
shape="poly"→ 至少 6 个值，成对出现：x1,y1,x2,y2,x3,y3,... - 调试建议：临时加
style="outline: 2px solid red"到<img>上，用开发者工具测实际图片尺寸，再反推 coords
map 热区在移动端点击失效
根本原因是移动端没有 hover，且 touch 事件默认不触发 click，尤其在 iOS Safari 中，<area> 的 click 绑定容易被忽略。
性能影响：不加处理时，用户要点两次（第一次 focus，第二次才触发），体验断层。
- 给
<area>加role="button"和tabindex="0"，提升可访问性并激活触控响应 - 监听
touchstart替代click：<area ... ontouchstart="handleClick('zone1'); return false;"> - 更通用方案：用
addEventListener同时绑定click和touchstart，并在 handler 里调用event.preventDefault()
如何让 map 热区支持键盘操作（Tab + Enter）
纯靠 onclick 的 <area> 默认不可聚焦，键盘用户 Tab 过去就跳过了，这是 WCAG 2.1 明确不合规的行为。
容易被忽略的地方：很多人以为加了 tabindex="0" 就够了，但没处理 Enter/Space 键的触发逻辑。
- 必须加
tabindex="0"让<area>可聚焦 - 监听
keydown，判断event.key === 'Enter'或' '（空格），再手动调用点击逻辑 - 别忘了加视觉反馈，比如聚焦时用
:focus { outline: 2px solid #007bff; } - 注意：IE 不支持
<area>的tabindex，如需兼容，得用 JS 模拟焦点管理
map，而是忽略了 coords 的坐标系基准、移动端事件机制差异，以及键盘交互这个硬性合规项。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
