在JavaScript中获取点击位置是前端开发中的常见需求,通常用于实现交互功能，如弹出菜单、拖拽元素或绘制图形等，要准确获取点击位置，需要理解浏览器事件对象中的坐标属性，并结合不同场景（如窗口坐标系、元素坐标系）进行处理，以下是详细的方法和示例说明。

基础概念：事件对象与坐标属性

当用户点击页面时,浏览器会触发一个click事件，并传递一个事件对象（Event对象），该对象包含与点击相关的信息，其中最常用的是坐标属性，主要坐标属性包括：

1. clientX和clientY：表示点击位置相对于浏览器视口（viewport）左上角的坐标，不受页面滚动影响。
2. pageX和pageY：表示点击位置相对于整个文档左上角的坐标，会随着页面滚动而变化。
3. screenX和screenY：表示点击位置相对于用户屏幕左上角的坐标，通常用于多窗口交互。
4. offsetX和offsetY：表示点击位置相对于目标元素（event.target）左上角的坐标，仅适用于目标元素是DOM元素的情况。

获取视口坐标（clientX/clientY）

视口坐标是最常用的点击位置数据,适用于大多数固定定位或视口相关的交互，点击页面时在点击位置显示一个提示框：

document.addEventListener('click', function(event) {
    const x = event.clientX;
    const y = event.clientY;
    console.log(`点击位置（视口坐标）：x=${x}, y=${y}`);
});

获取文档坐标（pageX/pageY）

如果页面存在滚动,且需要获取点击位置在完整文档中的绝对位置（如实现全页面绘图），则使用pageX和pageY：

document.addEventListener('click', function(event) {
    const x = event.pageX;
    const y = event.pageY;
    console.log(`点击位置（文档坐标）：x=${x}, y=${y}`);
});

获取目标元素相对坐标（offsetX/offsetY）

当需要计算点击位置在特定元素内部的偏移时（如点击表格单元格时获取行列索引），可以使用offsetX和offsetY，但需注意，这些属性在Firefox中可能不被支持，需通过兼容性处理：

document.getElementById('targetElement').addEventListener('click', function(event) {
    const x = event.offsetX;
    const y = event.offsetY;
    console.log(`点击位置（元素内坐标）：x=${x}, y=${y}`);
});

兼容性处理：对于不支持offsetX的浏览器，可通过getBoundingClientRect()计算：

const rect = event.target.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

不同场景下的坐标获取示例

在固定定位元素中显示点击位置

document.addEventListener('click', function(event) {
    const tooltip = document.getElementById('tooltip');
    tooltip.style.left = event.clientX + 'px';
    tooltip.style.top = event.clientY + 'px';
    tooltip.style.display = 'block';
});

在可滚动容器中获取绝对位置

const scrollContainer = document.getElementById('scrollContainer');
scrollContainer.addEventListener('click', function(event) {
    const rect = scrollContainer.getBoundingClientRect();
    const x = event.clientX - rect.left + scrollContainer.scrollLeft;
    const y = event.clientY - rect.top + scrollContainer.scrollTop;
    console.log(`容器内绝对坐标：x=${x}, y=${y}`);
});

获取点击元素的位置信息

document.querySelectorAll('.clickable').forEach(element => {
    element.addEventListener('click', function(event) {
        const rect = this.getBoundingClientRect();
        console.log(`元素位置：left=${rect.left}, top=${rect.top}`);
        console.log(`点击位置（元素内）：x=${event.offsetX}, y=${event.offsetY}`);
    });
});

坐标属性的对比与适用场景

以下表格总结了不同坐标属性的用途和特点：

常见问题与解决方案

1. 问题：offsetX在Firefox中不生效怎么办？
   解决方案：使用event.target.getBoundingClientRect()结合clientX/Y计算相对位置。

2. 问题：页面滚动后clientX/Y与实际位置不符？
   解决方案：如果需要文档绝对坐标，应使用pageX/Y；若需视口坐标，则无需额外处理。

   
   （图片来源网络，侵删）

相关问答FAQs

问题1：如何获取点击位置相对于父容器的坐标？
解答：通过event.currentTarget获取父容器元素，然后使用getBoundingClientRect()计算相对位置。

const parent = event.currentTarget;
const rect = parent.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

问题2：为什么pageX和pageY在iOS Safari中可能返回undefined？
解答：iOS Safari在部分情况下会省略pageX和pageY属性，可通过clientX + window.scrollX和clientY + window.scrollY模拟计算：

const x = event.pageX || event.clientX + window.scrollX;
const y = event.pageY || event.clientY + window.scrollY;