本文介绍如何通过监听鼠标点击事件获取坐标，将弹出框精准定位在图像映射（image map）热点区域的右下方，避免遮挡原图，提升交互体验。
在图像映射（<map> + <area>）中实现点击热点弹出信息框时，若使用固定 top/left 值（如原始代码中的 top: 1.5rem; left: 1.5rem），弹窗会始终出现在页面同一位置，无法适配不同热点的点击位置，用户体验生硬且易遮挡关键区域。理想的方案是：让弹出框“跟随点击位置”动态定位，紧邻热点右侧或下方，既清晰可见，又不干扰图像本身。
✅ 核心实现原理
利用事件对象 event 的 clientX 和 clientY 属性，获取用户点击时相对于视口（viewport）的精确坐标，再为弹出框设置 position: absolute 并动态赋值 style.left 和 style.top：
function openBubble(event) {
const content = myData[this.id];
bubbleContent.innerHTML = `
<h3>${content.title}</h3>
<p>${content.description}</p>
`;
// 关键：基于点击坐标偏移显示（+30px 避免紧贴鼠标指针）
bubble.style.left = (event.clientX + 30) + 'px';
bubble.style.top = (event.clientY + 30) + 'px';
bubble.className = 'shown';
}⚠️ 注意：event.clientX/Y 返回的是视口坐标，因此弹窗会随滚动保持相对位置——这正是我们期望的“跟随点击点”的行为。
? 完整优化要点
- 移除 CSS 中的固定 top/left：原 .myBubble 规则中 top: 1.5rem; left: 1.5rem 必须删除，否则会与 JS 动态样式冲突；
- 确保容器定位上下文：#myWrapper 已设 position: relative，但弹窗使用 absolute 定位在视口内（非其内部），因此无需额外调整父容器；
-
添加合理偏移量：+30px 可避免弹窗覆盖鼠标指针，也可根据设计需求调整为 +10px（上方）、-200px（左侧）等，例如：
// 显示在热点右上方（更紧凑） bubble.style.left = (event.clientX + 10) + 'px'; bubble.style.top = (event.clientY - 120) + 'px';
- 响应式兼容性：配合 imageMapResize() 库，<area> 坐标已自动适配缩放，而 clientX/Y 天然支持响应式布局，无需额外处理。
? 进阶建议（可选）
- 若需严格对齐图像内某点（如热点中心），可结合 getBoundingClientRect() 计算热点区域位置，但对多数场景，clientX/Y 简洁可靠；
- 添加 CSS 过渡动画增强体验：
#myBubble { transition: opacity 0.2s, transform 0.2s; } #myBubble.shown { opacity: 1; transform: scale(1); }
通过以上改进，弹出框真正实现了“所点即所得”的直观交互——每次点击不同热点，信息框都智能出现在最易读的位置，兼顾功能性与用户体验。
