先记住这个答案
clientX 是点击位置相对浏览器内容视口的水平距离，页面滚动后原点仍是当前可见区域左边；pageX 以整个文档为原点，包含水平滚动量；screenX 以用户屏幕为原点，窗口移到另一块屏幕后会变化。提示层若用 position: fixed，通常配 clientX；若定位在文档或容器内，要按其坐标原点转换。
clientX相对视口pageX相对文档screenX相对屏幕- 定位时要与 CSS 坐标系一致
固定提示层与点击点对齐
用户点击图表中的数据点后展示浮层。浮层若直接挂在页面顶层并用 position: fixed，其 left、top 以视口为参照，此时拿 clientX、clientY 更直接。
document.addEventListener('click', event => {
const tip = document.querySelector('#tip')
tip.style.position = 'fixed'
tip.style.left = event.clientX + 'px'
tip.style.top = event.clientY + 'px'
})页面往下滚动后，点击点仍在当前视口中的对应位置。若这里改用 pageY，滚动距离会被算进去，浮层就可能偏离点击点。
还要处理浮层自身宽高和视口边缘：点击靠右下角时可向左上翻转。坐标选择正确只是第一步，不能保证浮层永远完整可见。
放在容器内部还要换算
如果浮层是某个相对定位容器的绝对定位子元素，clientX 不能直接作为容器的 left。先读容器的 getBoundingClientRect()，再用点击视口坐标减去容器矩形左上角，得到容器内坐标。
screenX 常用于跨窗口或与系统屏幕位置相关的场景，不适合直接给页面元素定位。文档滚动、浏览器窗口移动和容器偏移是三种不同变化，排查错位时要分别确认。
容器如果有边框，getBoundingClientRect().left 指向边框外缘，而绝对定位子元素通常以包含块的内边距边缘为参考；直接相减仍可能差几个像素。容器本身发生缩放或旋转时，简单减法也不再足够。面试里先说清坐标系，再说明特殊布局需要测量和换算，比死记一个公式可靠。
另一个常见错误是把 offsetX 当成固定的“相对图表坐标”。当点击落在图表内部不同子元素上时，事件目标变化可能让偏移参考对象也变。需要稳定以某个容器为原点时，显式用该容器的矩形换算更容易维护。
容易答错的地方
- 滚动后把
pageY直接给固定浮层 - 固定定位以视口为参照，文档坐标多了滚动位移。
- 把
screenX当作浏览器内容坐标 - 它以屏幕为原点，窗口位置变化会影响值。
面试官还会怎么问？
怎样算容器内点击坐标？
用 clientX、clientY 减去容器 getBoundingClientRect() 的左上角，并考虑边框或变换等额外布局因素。
页面不滚动时 clientX 和 pageX 一样吗？
可能接近或相同，但只是滚动位移为零时的结果，不代表二者定义相同。
触屏点击也会有这些值吗？
click 事件通常提供相应位置，但复杂指针交互更适合使用 Pointer Events 并测试具体设备。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。