如何通过浏览器扩展阻止网页交互？遮罩pointer-events失效排查

你设置pointer-events: none !important是完全错误的——这个属性的作用是让元素不接收任何指针事件，鼠标事件会直接穿透到下层的页面元素，这就是为什么按钮和链接还能被点击的原因。

要实现遮罩层阻止页面交互，同时高亮鼠标指向的元素，需要调整以下两点：

1. 修正遮罩层的pointer-events属性 #

把遮罩层的pointer-events: none !important改成pointer-events: auto（或者直接删除这行，因为auto是默认值），这样遮罩层会拦截所有指针事件，阻止下层元素被点击。

.as-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  cursor: default;
  /* 移除pointer-events: none，改用默认的auto */
  background-color: rgba(0, 0, 0, 0.8);
}

2. 实现鼠标指向元素的高亮 #

现在遮罩层会挡住所有元素，你可以通过两种方式实现高亮效果：

方式一：遮罩层挖洞透出目标元素 #

通过监听鼠标移动事件，获取目标元素的位置和尺寸，用clip-path动态修改遮罩层的形状，让对应区域透出：

// 监听鼠标移动事件
document.addEventListener('mousemove', (e) => {
  const target = e.target;
  if (!target || target === overlay) return;
  
  const rect = target.getBoundingClientRect();
  // 生成clip-path，挖去目标元素所在区域
  overlay.style.clipPath = `polygon(
    0 0, 0 100%, ${rect.left}px 100%, ${rect.left}px ${rect.top}px,
    ${rect.right}px ${rect.top}px, ${rect.right}px ${rect.bottom}px,
    ${rect.left}px ${rect.bottom}px, ${rect.left}px 100%, 100% 100%, 100% 0
  )`;
});

// 隐藏遮罩时恢复原状
function hideOverlay() {
  overlay.style.clipPath = 'none';
}

方式二：添加独立高亮框 #

如果只需要视觉上的高亮边框，不需要透出元素，可以在遮罩层上添加一个跟随鼠标的高亮框：

// 创建高亮框元素
const highlight = document.createElement('div');
highlight.className = 'as-highlight';
overlay.appendChild(highlight);

document.addEventListener('mousemove', (e) => {
  const target = e.target;
  if (!target || target === overlay) return;
  
  const rect = target.getBoundingClientRect();
  // 设置高亮框的位置和尺寸
  highlight.style.top = `${rect.top}px`;
  highlight.style.left = `${rect.left}px`;
  highlight.style.width = `${rect.width}px`;
  highlight.style.height = `${rect.height}px`;
});

对应的高亮框CSS：

.as-highlight {
  position: absolute;
  border: 2px solid #ffffff;
  z-index: 1; /* 确保在遮罩层上方 */
  pointer-events: none; /* 高亮框不拦截事件，让遮罩层继续阻止页面交互 */
}

核心错误是误解了pointer-events: none的作用——它是让元素对指针事件“透明”，而非阻止事件传递。正确的逻辑是让遮罩层接收指针事件来拦截交互，再通过视觉手段实现元素高亮。

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