ReactJS中如何检测点击或触摸操作是否在指定className的元素上

DevOps 小满

2026-9-30

兼容桌面/移动端的点击位置检测方案

问题根因

移动端触摸操作不会触发CSS :hover 伪类状态，你原先基于:hover选择器的判断逻辑在触摸设备上自然无法生效

实现方案

放弃依赖:hover状态的判断，改用点击坐标和元素位置比对的逻辑，同时绑定鼠标、触摸两类事件覆盖全场景，代码实现如下：

先改造LineChart组件的事件绑定，同时支持桌面端鼠标事件和移动端触摸事件

<LineChart 
  onMouseDown={handleClickCheck}
  onTouchEnd={handleClickCheck}
/>

封装通用的位置判断逻辑：

const handleClickCheck = (e) => {
  // 自适应获取触摸/鼠标事件的坐标，兼容不同触摸阶段的事件对象
  const point = e.touches?.[0] || e.changedTouches?.[0] || e;
  const clientX = point.clientX;
  const clientY = point.clientY;
  let isOverLabelBtn = false;

  // 遍历所有标签按钮，判断点击坐标是否落在元素范围内
  $('.labelBtn').each(function() {
    const rect = this.getBoundingClientRect();
    if (
      clientX >= rect.left &&
      clientX <= rect.right &&
      clientY >= rect.top &&
      clientY <= rect.bottom
    ) {
      isOverLabelBtn = true;
      return false; // 匹配到元素直接终止遍历
    }
  })

  if (isOverLabelBtn) {
    console.log("over btn");
  } else {
    console.log("not over btn");
    try{
      setRefAreaLeft(e.activeLabel);
    } catch {
      console.log("Click out of chart area");
    }
  } 
}