如何在禁用元素交互的同时获取鼠标悬停的元素？

核心思路 #

用遮罩层拦截所有用户交互，同时在遮罩层的鼠标移动事件中，临时移除遮罩层的指针事件，获取鼠标位置下的真实页面元素，再恢复遮罩层的指针事件，最后基于该元素渲染高亮效果。

具体实现步骤 #

• 创建遮罩层
  遮罩层负责阻止用户与页面元素交互，样式设置如下：

  .inspector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    pointer-events: auto; /* 拦截所有指针事件 */
    z-index: 9999;
  }
  

• 创建高亮层
  用于显示悬停元素的高亮效果，不干扰交互：

  .inspector-highlight {
    position: fixed;
    border: 2px solid #2196F3;
    background-color: rgba(33, 150, 243, 0.1);
    pointer-events: none; /* 不拦截指针事件 */
    z-index: 9998; /* 低于遮罩层，确保遮罩层始终在最上层 */
    transition: all 0.1s ease;
  }
  

• 监听遮罩层的鼠标移动事件
  在遮罩层上监听mousemove，通过临时修改遮罩层的pointer-events来获取真实元素：

  const overlay = document.querySelector('.inspector-overlay');
  const highlight = document.querySelector('.inspector-highlight');
  
  overlay.addEventListener('mousemove', (e) => {
    // 临时关闭遮罩层的指针事件，让elementFromPoint能获取到页面元素
    overlay.style.pointerEvents = 'none';
    // 获取鼠标位置下的元素
    const targetElement = document.elementFromPoint(e.clientX, e.clientY);
    // 恢复遮罩层的指针事件，继续拦截交互
    overlay.style.pointerEvents = 'auto';
  
    if (!targetElement || targetElement === document.body) {
      // 没有有效元素时隐藏高亮层
      highlight.style.display = 'none';
      return;
    }
  
    // 获取元素的位置和尺寸
    const rect = targetElement.getBoundingClientRect();
    // 更新高亮层的位置和大小
    highlight.style.display = 'block';
    highlight.style.left = `${rect.left}px`;
    highlight.style.top = `${rect.top}px`;
    highlight.style.width = `${rect.width}px`;
    highlight.style.height = `${rect.height}px`;
  });
  

关键细节说明 #

• 临时切换pointer-events的操作非常短暂，用户不会感知到页面元素可交互的间隙。
• 使用document.elementFromPoint而非直接获取事件目标，因为遮罩层在最上层，事件目标永远是遮罩层。
• 高亮层设置pointer-events: none，确保它不会干扰遮罩层的事件监听和交互拦截。

内容的提问来源于stack exchange，提问作者U. Watt