JavaScript获取鼠标点击坐标分三种：①视口坐标用clientX/clientY，不受滚动影响；②文档坐标用pageX/pageY，含滚动偏移；③元素内坐标需结合getBoundingClientRect()计算；移动端需用touches[0].clientX/Y。

JavaScript 获取鼠标点击位置在页面中的坐标，主要通过事件对象的几个属性实现，关键看你想获取的是相对于视口、文档还是某个元素的坐标。

获取相对于浏览器视口的坐标（推荐常用）

使用 event.clientX 和 event.clientY，它们返回鼠标点击点距离浏览器左上角（即当前可视区域左上角）的水平和垂直距离，不受页面滚动影响。

• 适合做悬浮提示、跟随鼠标的效果
• 代码简单稳定，兼容性好

示例：

document.addEventListener('click', function(e) {
  console.log('X:', e.clientX, 'Y:', e.clientY);
});

获取相对于整个文档的坐标（含滚动偏移）

用 event.pageX 和 event.pageY，它们返回鼠标在整页（从文档左上角起算）中的绝对位置，会自动加上页面滚动距离（window.scrollX/window.scrollY）。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 适合定位元素在整页中的真实位置，比如点击后跳转到某锚点附近
• 注意：IE8 及更早版本不支持，但现代浏览器均支持

获取相对于某个元素内部的坐标

如果想得到鼠标在某个 div 或按钮内的点击位置（例如画布绘图、自定义滑块），需结合 getBoundingClientRect() 计算：

立即学习“Java免费学习笔记（深入）”；

• 先调用 element.getBoundingClientRect() 得到该元素左上角相对于视口的位置
• 再用 e.clientX - rect.left 和 e.clientY - rect.top 算出相对坐标

示例：

const box = document.getElementById('myBox');
box.addEventListener('click', function(e) {
  const rect = this.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  console.log('相对盒子的坐标：', x, y);
});

小提醒：移动端要留意 touch 事件

在手机或平板上，点击由 touchstart 或 touchend 触发，坐标需从 e.touches[0] 中取：

• e.touches[0].clientX / e.touches[0].clientY 对应视口坐标
• 如需兼容 PC 和移动设备，可统一监听 click 和 touchend，并在事件处理中判断是否存在 touches