document.querySelector('area') 返回 null 的主要原因是执行时机过早，DOM 尚未解析到 区域；应将 script 移至 前或用 DOMContentLoaded 事件确保 area 已渲染。
area 元素本身不冒泡，不能靠父级委托；必须直接绑定 click 事件，且得等 DOM 加载完、所有 area 渲染到位才能查得到。
为什么 document.querySelector('area') 返回 null？
常见原因不是写错了选择器，而是执行时机太早：area 标签虽在 HTML 里，但 JS 脚本若在 中同步执行，此时 DOM 还没解析到 <map></map> 那一块，querySelector 自然找不到。
- 把
<script></script>放在前是最简单可靠的解法 - 或者用
document.addEventListener('DOMContentLoaded', ...)包一层 - 别依赖
window.onload——它等图片加载完才触发，太晚，area 已存在但脚本可能已报错退出 - 检查
<img usemap="#xxx" alt="HTML区域映射事件怎么绑定？交互功能添加教程" >和<map name="xxx"></map>是否配对成功：name 值必须完全一致（大小写敏感），且usemap值开头必须带#
area 点击事件怎么绑才不漏、不重复？
别用 onclick="handle(...)" 写在标签里，调试难、逻辑散、没法阻止默认跳转。统一走 addEventListener，并注意三点：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 对每个
area单独绑定，document.querySelectorAll('area')+forEach最稳妥 - 回调里第一句写
e.preventDefault()，否则 href 存在时会先跳转再执行 JS - 避免多次执行绑定逻辑——比如页面局部刷新后又跑一遍初始化，会导致同一个
area上挂多个监听器，点一次触发多次 - 推荐用
data-*属性传参，比如data-part="liver"，比从href或alt解析更稳定
移动端点击没反应？
iOS Safari 对非可点击元素（包括 area）的 touch 事件支持不一致，仅绑 click 可能失效。
立即学习“前端免费学习笔记（深入）”；
- 加一句
document.querySelector('img').style.cursor = 'pointer'，能激活 iOS 的点击识别机制 - 或同时监听
touchstart：给每个area补一个addEventListener('touchstart', handler, { passive: false }) - 注意：
touchstart默认是passive: true，若要调用preventDefault()必须显式设为false - 别指望
:hover在area上生效——它不可见、不渲染，CSS 伪类完全无效
缩放后热区偏移，coords 还能用吗？
不能。area.coords 永远基于图片原始像素尺寸，CSS 缩放、width/height 设置、视口变化都会让热点“漂移”。这是最隐蔽也最常被忽视的问题。
- 验证方法：右键图片 → “在新标签页中打开图像”，看 URL 是否指向原始分辨率图（比如
body-800x1200.png） - 如果页面里显示的是 400×600，但 coords 还按 800×1200 写，那热区实际位置只有理论的一半
- 临时修复：用 JS 监听
resize和img.load，算出缩放比，遍历重写每个area.coords - 长期建议：换 SVG —— 坐标天然相对、支持 transform、事件绑定更自然，维护成本远低于硬调 coords
