如何在不干扰自定义高亮层mousemove事件的前提下阻止底层元素事件？

问题背景 #

开发带有element exclusion模式的浏览器扩展时，需要同时实现两个核心需求：

• 全屏Overlay拦截页面底层事件（设置pointer-events: auto）
• 高亮光标下方的页面元素，并展示元素标签及直接子元素标签的说明文本

但添加Overlay后，document.elementFromPoint()会返回Overlay元素本身，导致无法正确识别光标下的目标页面元素，高亮功能失效。

解决方案 #

方案1：临时隐藏Overlay获取目标元素 #

在获取目标元素前临时隐藏Overlay，获取完成后恢复显示，既不影响事件拦截，又能正确拿到页面元素：

function mouseMoveHandler(e, controller, hiddenPanel, highlighterBox) {
  const overlay = document.getElementById("example-blocker");
  // 临时隐藏overlay
  const originalDisplay = overlay.style.display;
  overlay.style.display = "none";
  
  const target = document.elementFromPoint(e.clientX, e.clientY);
  // 恢复overlay显示
  overlay.style.display = originalDisplay;
  
  if (!target) return;

  if (
    target === controller ||
    target === hiddenPanel ||
    target.closest("#example-element-exclude-overlay")
  ) return;

  // 以下原有高亮逻辑保持不变
  const rect = target.getBoundingClientRect();

  Object.assign(highlighterBox.style, {
    display: "block",
    top: rect.top + window.scrollY + "px",
    left: rect.left + window.scrollX + "px",
    width: rect.width + "px",
    height: rect.height + "px",
  });

  const tagName = target.tagName.toLowerCase();
  const childTags = Array.from(target.children).map(child => child.tagName.toLowerCase());
  const displayText = childTags.length > 0 ?
    `${tagName} > ${childTags.join(" + ")}` :
    tagName;

  let label = highlighterBox.querySelector("#highlighter-label");
  if (!label) {
    label = document.createElement("div");
    label.id = "highlighter-label";
    Object.assign(label.style, {
      position: "absolute",
      background: "rgba(255, 0, 0, 0.8)",
      color: "white",
      fontSize: "11px",
      padding: "1px 6px",
      pointerEvents: "none",
      fontFamily: "monospace",
      zIndex: 999998,
    });
    highlighterBox.appendChild(label);
  }

  label.textContent = displayText;

  const boxBottom = rect.bottom + window.scrollY;
  const viewportBottom = window.scrollY + window.innerHeight;
  const labelHeight = label.getBoundingClientRect().height;

  if (boxBottom + labelHeight < viewportBottom) {
    label.style.top = "100%";
    label.style.bottom = "auto";
    label.style.transform = "translateY(0%)";
    label.style.borderRadius = "0px 0px 4px 4px";
  } else {
    label.style.bottom = "100%";
    label.style.top = "auto";
    label.style.transform = "translateY(-100%)";
    label.style.borderRadius = "4px 4px 0px 0px";
  }
}

方案2：使用elementsFromPoint过滤Overlay #

利用document.elementsFromPoint()获取坐标点下的所有元素，过滤掉Overlay和控制器相关元素，直接取目标页面元素：

function mouseMoveHandler(e, controller, hiddenPanel, highlighterBox) {
  const elements = document.elementsFromPoint(e.clientX, e.clientY);
  // 过滤掉overlay、控制器及相关元素
  const target = elements.find(el => 
    el !== controller && 
    el !== hiddenPanel && 
    !el.closest("#example-element-exclude-overlay") &&
    el.id !== "example-blocker"
  );
  
  if (!target) return;

  // 以下原有高亮逻辑保持不变
  const rect = target.getBoundingClientRect();

  Object.assign(highlighterBox.style, {
    display: "block",
    top: rect.top + window.scrollY + "px",
    left: rect.left + window.scrollX + "px",
    width: rect.width + "px",
    height: rect.height + "px",
  });

  const tagName = target.tagName.toLowerCase();
  const childTags = Array.from(target.children).map(child => child.tagName.toLowerCase());
  const displayText = childTags.length > 0 ?
    `${tagName} > ${childTags.join(" + ")}` :
    tagName;

  let label = highlighterBox.querySelector("#highlighter-label");
  if (!label) {
    label = document.createElement("div");
    label.id = "highlighter-label";
    Object.assign(label.style, {
      position: "absolute",
      background: "rgba(255, 0, 0, 0.8)",
      color: "white",
      fontSize: "11px",
      padding: "1px 6px",
      pointerEvents: "none",
      fontFamily: "monospace",
      zIndex: 999998,
    });
    highlighterBox.appendChild(label);
  }

  label.textContent = displayText;

  const boxBottom = rect.bottom + window.scrollY;
  const viewportBottom = window.scrollY + window.innerHeight;
  const labelHeight = label.getBoundingClientRect().height;

  if (boxBottom + labelHeight < viewportBottom) {
    label.style.top = "100%";
    label.style.bottom = "auto";
    label.style.transform = "translateY(0%)";
    label.style.borderRadius = "0px 0px 4px 4px";
  } else {
    label.style.bottom = "100%";
    label.style.top = "auto";
    label.style.transform = "translateY(-100%)";
    label.style.borderRadius = "4px 4px 0px 0px";
  }
}

关键说明 #

• 方案1实现简单，适合大多数场景，性能影响可忽略
• 方案2无需修改Overlay显示状态，适合对DOM操作敏感的场景
• 确保控制器的z-index（当前为999999）高于Overlay的z-index（999997），保证控制器可正常拖动

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