JavaScript中如何根据坐标位置查找鼠标事件目标元素

AI 小北

2026-10-7

解决方案

你可以通过浏览器原生DOM API直接实现需求，无需触发实际点击事件：

基础查询：调用document.elementFromPoint(x, y)，返回值就是指定坐标下会优先接收onmousedown事件的元素，该API会自动跳过设置了pointer-events: none的元素，和实际点击的事件触发逻辑完全一致。
如需同时获取坐标下包含pointer-events: none在内的所有叠层元素，可以调用复数形式的document.elementsFromPoint(x, y)，返回数组会按照视觉叠层从高到低排列所有和坐标重叠的元素，你可以自行遍历筛选需要的目标。

完整实现示例

以下代码可以同时返回实际处理onmousedown事件的元素和坐标下所有设置了pointer-events: none的元素，满足你后续添加拦截器的需求：

function getMouseEventTargets(x, y) {
  // 获取坐标下所有叠层元素，从顶层到底层排序
  const allOverlapElements = document.elementsFromPoint(x, y);
  let actualMousedownTarget = null;
  const pointerNoneElements = [];

  for (const el of allOverlapElements) {
    const computedStyle = window.getComputedStyle(el);
    if (computedStyle.pointerEvents === 'none') {
      pointerNoneElements.push(el);
      continue;
    }
    // 第一个非pointer-events:none的元素就是实际接收事件的目标
    if (!actualMousedownTarget) {
      actualMousedownTarget = el;
    }
  }

  return {
    // 处理onmousedown的元素
    actualTarget: actualMousedownTarget,
    // 坐标下所有设置了pointer-events:none的元素，可用于后续添加拦截器
    pointerNoneTargets: pointerNoneElements
  };
}

// 调用示例：查询坐标(150, 200)对应的元素
const targetResult = getMouseEventTargets(150, 200);
console.log('处理mousedown事件的元素：', targetResult.actualTarget);
console.log('需添加拦截器的pointer-events:none元素：', targetResult.pointerNoneTargets);