如何获取方形元素上的精确点击位置？

原生JavaScript实现 #

监听目标元素的click事件，通过事件对象的内置属性即可获取不同维度的精确坐标，核心属性说明：

• offsetX/offsetY：相对于点击元素自身左上角的坐标（最常用，直接反映在元素内的点击位置）
• clientX/clientY：相对于浏览器视口左上角的坐标
• pageX/pageY：相对于文档左上角的坐标（包含页面滚动距离）

示例代码：

<!-- HTML结构 -->
<div id="square" style="width: 200px; height: 200px; background: #ccc;"></div>

<script>
const square = document.getElementById('square');
square.addEventListener('click', (e) => {
  // 元素内相对位置
  const elemRelativeX = e.offsetX;
  const elemRelativeY = e.offsetY;
  // 视口相对位置
  const viewportX = e.clientX;
  const viewportY = e.clientY;
  
  console.log(`元素内点击位置：X=${elemRelativeX}, Y=${elemRelativeY}`);
  console.log(`视口内点击位置：X=${viewportX}, Y=${viewportY}`);
});
</script>

jQuery实现 #

借助jQuery的事件对象和元素偏移量方法，可兼容更多旧版浏览器，同时支持两种坐标计算方式：

示例代码：

<!-- HTML结构 -->
<div id="square" style="width: 200px; height: 200px; background: #ccc;"></div>

<script src="jquery.min.js"></script>
<script>
$('#square').click(function(e) {
  // 直接通过事件对象获取元素内相对位置
  const directRelativeX = e.offsetX;
  const directRelativeY = e.offsetY;
  // 通过元素偏移量计算（兼容无offsetX属性的旧浏览器）
  const elemOffset = $(this).offset();
  const calcRelativeX = e.pageX - elemOffset.left;
  const calcRelativeY = e.pageY - elemOffset.top;
  
  console.log(`直接获取元素内位置：X=${directRelativeX}, Y=${directRelativeY}`);
  console.log(`计算式元素内位置：X=${calcRelativeX}, Y=${calcRelativeY}`);
});
</script>

React实现 #

在函数组件中通过合成事件的nativeEvent属性获取原生事件参数，或者直接使用合成事件提供的坐标属性：

示例代码：

import React from 'react';

function Square() {
  const handleClick = (e) => {
    // 元素内相对位置
    const elemRelativeX = e.nativeEvent.offsetX;
    const elemRelativeY = e.nativeEvent.offsetY;
    // 视口相对位置
    const viewportX = e.clientX;
    const viewportY = e.clientY;
    
    console.log(`元素内点击位置：X=${elemRelativeX}, Y=${elemRelativeY}`);
    console.log(`视口内点击位置：X=${viewportX}, Y=${viewportY}`);
  };

  return (
    <div 
      style={{ width: '200px', height: '200px', background: '#ccc' }}
      onClick={handleClick}
    />
  );
}

export default Square;

补充说明 #

如果元素存在边框或内边距，offsetX/offsetY的计算起点是元素的内边距边缘（border以内区域）。若需要从边框左上角开始计算，可结合元素的clientLeft/clientTop属性调整：

const adjustedX = e.offsetX + e.target.clientLeft;
const adjustedY = e.offsetY + e.target.clientTop;

内容的提问来源于stack exchange，提问作者Discovery