area元素原生不支持onclick，事件须绑定在关联的img上并手动判断坐标命中；可用elementFromPoint简化但有兼容性问题；SVG是更可靠的现代替代方案。
area 元素本身不支持 onclick 属性
直接在 <area> 标签里写 onclick 是无效的——浏览器会忽略它。这不是 bug，而是 HTML 规范明确规定的：<area> 是 void element（空元素），且不参与事件捕获/冒泡链，原生不响应用户交互事件。
真正能响应点击的是它所属的 <map> 关联的图像（<img usemap>），所以事件必须绑定在图像上，再通过坐标判断是否落在某个 <area> 区域内。
用 getBoundingClientRect + 鼠标坐标做手动命中检测
核心思路是：监听 <img> 的 click 事件，拿到鼠标相对于图片左上角的坐标，再遍历所有 <area>，用其 shape 和 coords 判断是否命中。
-
shape="rect"：coords是 [x1,y1,x2,y2]，检查clientX是否在 x1–x2 之间、clientY是否在 y1–y2 之间 -
shape="circle"：coords是 [cx,cy,r]，用距离公式(x−cx)²+(y−cy)² ≤ r² -
shape="poly"：coords是 [x1,y1,x2,y2,...]，需实现点在多边形内的射线法或 winding 数算法（可复用 point-in-polygon 这类轻量库） - 注意：坐标需转换为相对于图片的实际像素位置，要减去
img.getBoundingClientRect().left/top，并考虑图片缩放（img.naturalWidth / img.width比例校正）
用 document.elementFromPoint() 简化判断（有兼容性限制）
如果 <area> 已正确关联 <map> 且图像未被其他元素遮挡，可以尝试在 click 回调中调用：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
img.addEventListener('click', (e) => {
const el = document.elementFromPoint(e.clientX, e.clientY);
if (el && el.tagName === 'AREA') {
console.log('hit area:', el);
}
});
但要注意：
- 该方法返回的是「视觉上最顶层」的元素，若
<img>外层有透明 overlay、伪元素或pointer-events: none干扰，结果可能为空或错乱 - Safari 旧版本对
<area>返回不稳定，iOS Safari 15.4 之前常返回<img>而非<area></li> <li>必须确保 <code><map>
的name与<img usemap="#name">严格匹配，大小写敏感
现代替代方案：用 SVG 替代 image map
如果项目可控、不需要兼容 IE，SVG 是更可靠的选择：每个 <path> 或 <polygon> 都原生支持 onclick、cursor、hover，且坐标系稳定、无缩放失真问题。
做法很简单：
- 把原图作为
<svg>的<image>背景 - 用对应
<area coords>生成等价的<path d="...">或<polygon points="..."> - 直接绑定事件：
<path onclick="handleClick('region-a')" ...>
这省去了坐标换算、形状判断和浏览器差异处理，调试也直观——打开开发者工具能看到每个热区就是真实 DOM 元素。
真正麻烦的从来不是“怎么绑”，而是“绑完点不中”——多数时候是坐标没对齐、usemap 拼错了、图片用了 background-image（area 只对 <img src> 生效），或者忘了加 alt 和 aria-label 导致无障碍失效。
