React中如何为div添加点击事件监听器获取内部点击坐标

实现逻辑 #

要获取点击位置相对于div容器的内部坐标，核心是计算点击点的视口坐标减去容器本身距离视口左上角的偏移量，最终得到相对坐标。

完整实现代码 #

import { useCallback } from 'react';

const ContainerClickDemo = () => {
  const handleContainerClick = useCallback((e) => {
    // 获取绑定事件的容器元素
    const container = e.currentTarget;
    // 获取容器的视口位置信息
    const containerRect = container.getBoundingClientRect();
    // 计算内部相对坐标
    const innerX = e.clientX - containerRect.left;
    const innerY = e.clientY - containerRect.top;

    // 业务逻辑处理，示例为打印坐标
    console.log('点击位置相对容器坐标：', { x: innerX, y: innerY });
  }, []);

  return (
    <div 
      onClick={handleContainerClick}
      style={{
        width: '200px',
        height: '500px',
        background: '#f5f5f5',
        border: '1px solid #eee'
      }}
    >
      点击容器任意位置获取内部坐标
    </div>
  );
};

export default ContainerClickDemo;

注意事项 #

• 必须使用e.currentTarget获取容器元素：如果容器内部有子元素，e.target会指向触发点击的子元素，导致偏移量计算错误，e.currentTarget永远指向绑定了点击事件的容器本身
• 当容器存在滚动条时，需要额外加上滚动偏移量，坐标计算调整为：

  const innerX = e.clientX - containerRect.left + container.scrollLeft;
  const innerY = e.clientY - containerRect.top + container.scrollTop;
  

• 正常点击容器内部时，innerX的取值范围为0_{200，`innerY`的取值范围为0}500，若有精度要求可自行添加边界值校验。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture