新手导览容器pointer-events反向配置：仅镂空焦点区可交互

现有代码的核心问题 #

• 依赖box-shadow绘制的阴影区域不属于元素的盒模型范围，无法参与点击事件拦截，视觉上的蒙层不会实际阻挡用户点击下层内容
• 给.guide设置了全局pointer-events: none，导致整个导览层完全不拦截任何点击，页面上所有下层元素都可以被任意交互，无法实现仅焦点区可点击的效果

适配需求的实现思路 #

我们采用分层拆分的方案，完全兼容动态切换圆形/方形焦点、带平滑过渡、无第三方依赖（纯CSS+原生JS，React场景可直接复用）：

1. 把点击拦截和视觉效果拆成独立层，避免盒模型和视觉效果的逻辑冲突
2. 用四个独立的遮挡矩形拼成全屏蒙层，所有非焦点区的位置都被矩形覆盖，通过pointer-events: auto拦截对应区域的点击
3. 中间的焦点视觉层单独设置pointer-events: none，不阻挡下层目标元素的点击
4. 所有位置、大小、圆角属性都绑定动态变量，配合CSS transition实现平滑的形态切换效果

具体实现代码 #

改造后CSS #

.content{
  width: 100%;
  height: 100%;
  padding: 3rem;
  box-sizing: border-box;
}
button{
  padding: 1rem;
  margin: 1rem;
}

/* 蒙层遮挡块通用样式 */
.mask-block {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  /* 核心：拦截所有落在块上的点击，阻断到下层的穿透 */
  pointer-events: auto;
  transition: all 0.3s ease;
}
/* 上侧遮挡：从屏幕顶到焦点区上边缘 */
.mask-top {
  height: var(--focus-top, 0);
}
/* 下侧遮挡：从焦点区下边缘到屏幕底 */
.mask-bottom {
  top: calc(var(--focus-top, 0) + var(--focus-height, 0));
  height: calc(100vh - var(--focus-top, 0) - var(--focus-height, 0));
}
/* 左侧遮挡：从屏幕左缘到焦点区左边缘 */
.mask-left {
  top: var(--focus-top, 0);
  left: 0;
  width: var(--focus-left, 0);
  height: var(--focus-height, 0);
}
/* 右侧遮挡：从焦点区右边缘到屏幕右缘 */
.mask-right {
  top: var(--focus-top, 0);
  left: calc(var(--focus-left, 0) + var(--focus-width, 0));
  width: calc(100vw - var(--focus-left, 0) - var(--focus-width, 0));
  height: var(--focus-height, 0);
}

/* 焦点视觉层：保留原有样式逻辑，调整定位适配 */
.guide{
  position: fixed;
  z-index: 11;
  top: var(--focus-top, 0);
  left: var(--focus-left, 0);
  width: var(--focus-width, 9rem);
  height: var(--focus-height, 9rem);
  /* 动态切换圆角：9rem为正圆，0为方形，支持过渡 */
  border-radius: var(--focus-radius, 9rem);
  /* 核心：不拦截任何点击，让下层按钮可交互 */
  pointer-events: none;
  /* 平滑过渡效果 */
  transition: all 0.3s ease;
}

调整后的HTML结构 #

<!-- 原有页面内容 -->
<div class="content">
  <button>test button</button>
  <button>test button</button>
  <button>test button</button>
  <p>The user should only <br/>able to click on second button</p>
</div>

<!-- 四个拼接的蒙层遮挡块 -->
<div class="mask-block mask-top"></div>
<div class="mask-block mask-bottom"></div>
<div class="mask-block mask-left"></div>
<div class="mask-block mask-right"></div>

<!-- 视觉焦点层 -->
<div class="guide"></div>

动态控制的原生JS逻辑 #

无需jQuery，通过CSS变量动态匹配焦点位置、形态即可：

// 传入目标DOM元素，自动计算焦点区域参数
function setGuideFocus(targetEl, isCircle = false) {
  const rect = targetEl.getBoundingClientRect();
  const rootStyle = document.documentElement.style;
  // 给焦点区加8px的内边距，避免紧贴元素边缘
  const padding = 8;
  rootStyle.setProperty('--focus-top', `${rect.top - padding}px`);
  rootStyle.setProperty('--focus-left', `${rect.left - padding}px`);
  rootStyle.setProperty('--focus-width', `${rect.width + padding*2}px`);
  rootStyle.setProperty('--focus-height', `${rect.height + padding*2}px`);
  // 根据需求切换圆角：圆形设为50%，方形设为0
  rootStyle.setProperty('--focus-radius', isCircle ? '50%' : '0');
}

// 示例：聚焦到第二个按钮
const secondBtn = document.querySelectorAll('button')[1];
setGuideFocus(secondBtn, true);

方案优势 #

• 点击拦截精准：所有非焦点区的范围都被蒙层块覆盖，pointer-events: auto会直接阻断下层的点击事件，完全避免误触非目标元素
• 形态适配灵活：焦点区的圆角、位置、大小都支持动态切换，配合CSS transition可以实现平滑的圆形/方形切换动画，和原有交互逻辑完全一致
• 兼容性强：所有用到的CSS属性都是基础特性，在移动端WebView、旧版浏览器上都能稳定运行，不需要依赖高阶CSS特性
• 无侵入：和现有React组件逻辑完全兼容，只需要把上述JS逻辑替换为组件的state绑定即可，不需要额外引入第三方库

可选优化 #

如果想保留原来用box-shadow做柔和晕影的视觉效果，直接在.guide类上保留对应的阴影样式即可，因为该层已经设置了pointer-events: none，阴影的视觉效果不会影响点击拦截逻辑。

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