area标签不支持直接事件监听，onclick或addeventlistener均静默失效；必须在关联img上监听click，再通过坐标计算匹配area的shape与coords。
area 标签本身不支持事件监听，绑定 click 会静默失败
直接给 <area> 元素写 onclick 或用 addEventListener('click', ...) 绑定事件，多数浏览器不会报错，但**事件永远不会触发**——因为 <area> 是纯语义热区标签，不参与标准事件流，也不在渲染树中生成可交互节点。你看到的“点击无反应”，不是冒泡问题，而是根本没注册成功。
常见错误现象包括：控制台无报错、console.log 不执行、调试器断点不命中；误以为是 stopPropagation() 没起作用，实际连事件都没挂上。
- 必须把事件监听器加在关联的
<img>上，而非<area> -
<img>的usemap属性必须正确指向<map></map>，否则热区逻辑失效，更谈不上事件 - 不要尝试用
document.querySelector('area').click()触发，它不生效
img 上监听 click 后，如何精准识别是哪个 area 被点击
<img> 点击时，event.target 始终是 <img> 自身，无法直接拿到被点击的 <area>。必须靠 event.offsetX/event.offsetY 手动计算坐标，并匹配 <area> 的 coords 和 shape。
注意：coords 值基于图片原始尺寸（非 CSS 缩放后尺寸），若图片被缩放，需先做比例换算：
const img = document.querySelector('img');
const rect = img.getBoundingClientRect();
const scaleX = img.naturalWidth / rect.width;
const scaleY = img.naturalHeight / rect.height;
const x = (event.clientX - rect.left) * scaleX;
const y = (event.clientY - rect.top) * scaleY;
- 对
shape="rect"：检查x >= x1 && x = y1 && y - 对
shape="circle"：用距离公式判断(x-cx)² + (y-cy)² - 对
shape="poly"：用射线法或isPointInPath()（需先用<canvas></canvas>绘制路径）
area 区域禁用时别依赖 nohref，要用 pointer-events: none
nohref 是过时属性，现代浏览器已忽略；即使写了，也不会阻止点击事件冒泡到 <img> 或父容器，更不会禁用鼠标交互。
真正让某块 <area> “点不动”的做法是：移除其 href，再配合 CSS 隔离：
- 给对应
<area>添加id，例如<area id="disabled-zone" shape="rect" coords="0,0,100,100"> - 用 JS 动态添加样式：
document.getElementById('disabled-zone').style.pointerEvents = 'none'; - 若需键盘可访问性隔离，额外加
tabindex="-1"
注意：pointer-events: none 会彻底屏蔽所有鼠标事件，包括 mouseenter，且不可被子元素覆盖。
map 容器内嵌套其他元素会导致 area 失效
<map></map> 只接受 <area> 作为直接子元素。如果在 <map></map> 里写了 <div>、<code><span></span> 或注释节点，部分浏览器（尤其是 Safari）会直接丢弃后续所有 <area>，导致热区全部失效。
验证方法：打开 Chrome 开发者工具 → Elements 面板 → 展开 <map></map>，确认里面只有 <area> 标签，没有其他任何节点。
- 禁止写
<map><div><area></div></map> - 禁止写
<map><!-- comment --><area></map> - HTML5 允许省略
，但必须写<area ...>，不能写成<area ...>（XHTML 风格自闭合在 HTML5 中无效）
area 标签的边界非常硬：结构错一点，功能就全掉；它不报错、不警告，只沉默失效——这是最易被忽略的复杂点。
