能共存，但 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阻止默认跳转： - 更稳妥的做法是去掉
href，只靠 JS 控制行为： - 如果需要语义化链接（比如 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"到
map 热区在移动端点击失效
根本原因是移动端没有 hover，且 touch 事件默认不触发 click，尤其在 iOS Safari 中， 的 click 绑定容易被忽略。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
性能影响：不加处理时，用户要点两次（第一次 focus，第二次才触发），体验断层。
- 给
加role="button"和tabindex="0"，提升可访问性并激活触控响应 - 监听
touchstart替代click： - 更通用方案：用
addEventListener同时绑定click和touchstart，并在 handler 里调用event.preventDefault()
如何让 map 热区支持键盘操作（Tab + Enter）
纯靠 onclick 的 默认不可聚焦，键盘用户 Tab 过去就跳过了，这是 WCAG 2.1 明确不合规的行为。
容易被忽略的地方：很多人以为加了 tabindex="0" 就够了，但没处理 Enter/Space 键的触发逻辑。
- 必须加
tabindex="0"让可聚焦 - 监听
keydown，判断event.key === 'Enter'或' '（空格），再手动调用点击逻辑 - 别忘了加视觉反馈，比如聚焦时用
:focus { outline: 2px solid #007bff; } - 注意：IE 不支持
的tabindex，如需兼容，得用 JS 模拟焦点管理
实际项目里最常出问题的，不是不会写 map，而是忽略了 coords 的坐标系基准、移动端事件机制差异，以及键盘交互这个硬性合规项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
