area标签本身不渲染、不可交互，无法直接触发自定义事件；必须监听img的click事件，通过坐标计算手动判断是否命中area区域，再派发customevent。
area 标签本身不能触发自定义事件
area 是一个**被动的、不可交互的空元素**，浏览器不会给它默认添加点击事件监听器，也不会响应 click 以外的原生事件（比如 mouseenter 在部分浏览器中也不稳定）。它只在图像映射（map + img）上下文中被用于定义热点区域，点击后由浏览器自动处理 href 跳转或触发 focus 行为。你想“触发自定义事件”，本质是想在用户点击某个区域时执行 JS 逻辑——这必须靠监听父级 img 的事件并手动判断命中哪个 area 来实现。
监听 img 的 click 并匹配 area 区域的坐标
因为 area 不冒泡、不支持 addEventListener，唯一可行路径是：监听 img 元素的 click 事件，拿到鼠标坐标，再遍历所有 area，用其 shape 和 coords 手动计算是否落在该区域内。
- 先用
event.clientX/event.clientY获取相对于视口的点击位置，再通过img.getBoundingClientRect()换算成相对于图片左上角的像素坐标 - 对每个
area，根据shape类型做不同判断：-
rect：检查x ∈ [x1, x2]且y ∈ [y1, y2] -
circle：用距离公式(x−cx)² + (y−cy)² ≤ r² -
poly：用「射线法」或「叉积法」判断点是否在多边形内（注意 coords 是偶数个数字，需两两配对为顶点）
-
- 匹配成功后，再调用
new CustomEvent('area-clicked', { detail: { area: currentArea } })并dispatchEvent()到你选的目标元素（比如img或自定义容器）
usemap 绑定失效或 area 不响应的常见原因
很多“area 点不中”问题根本不是事件逻辑的问题，而是 HTML 结构或属性写错了，导致浏览器压根没加载热点区域：
-
<map></map>的name必须和<img usemap>的值**完全一致**，且usemap值**必须带#前缀**（如usemap="#navmap"对应<map name="navmap"></map>） -
area必须是<map></map>的**直接子元素**，嵌套在<div> 或放在 <code>里都无效 -
coords中只允许数字和逗号，Photoshop/Figma 导出的坐标常含空格或换行，必须手动清理 - 如果
<img>使用了 CSS 缩放（width: 100%），但coords还按原始分辨率写，热点会严重偏移——必须用 JS 动态缩放坐标，或改用固定尺寸图片 -
area的shape只接受rect、circle、poly、default；拼错（如rectangle、polygon）会导致该区域静默失效 - 避免用
poly定义细长或尖锐形状，优先拆成多个rect或circle - 给
<img>加上style="max-width:90%"，减少浏览器默认的延迟判定 - 若必须用
poly，确保最小包围矩形 ≥ 44px × 44px，并在调试时用outline临时标出区域边界，肉眼验证是否覆盖目标 - 不要依赖
area做关键业务操作（如支付入口），复杂交互建议改用 SVG 或 Canvas 实现
移动端 poly 热点点击失败怎么处理
iOS Safari 对小面积 poly 区域响应极差，尤其顶点密集或面积小于 44×44px 时，经常点不中。这不是代码 bug，而是系统级触摸判定策略：
