React中实现DOM元素右键触发遮罩聚焦效果的方案求助

开发者阿泽

2026-10-3

React 遮罩聚焦效果最简实现方案

核心实现思路

完全不需要额外新增4个div拼接遮罩，仅用1个元素配合CSS属性即可实现效果，代码精简度提升80%以上。

方案1：box-shadow 实现（推荐，适配99%场景）

这是成本最低的实现方式，仅需要1个定位遮罩元素：

右键点击目标元素时，调用getBoundingClientRect获取元素的top/left/width/height尺寸数据
给遮罩元素绑定动态CSS变量，对应上述尺寸值，CSS配置如下：

.highlight-mask {
  position: fixed;
  top: var(--target-top);
  left: var(--target-left);
  width: var(--target-width);
  height: var(--target-height);
  /* 核心：超大扩展阴影覆盖全屏幕，中间镂空位置刚好对准目标元素 */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
  z-index: 999;
  /* 不拦截下层交互 */
  pointer-events: none;
}

如果需要高亮元素加边框效果，直接给该遮罩加border属性即可，无需额外配置。

方案2：clip-path 实现（适配异形镂空需求）

如果后续需要支持圆形、圆角、多边形等特殊高亮形状，用全屏遮罩+裁剪实现：

创建1个全屏固定的半透明遮罩，用clip-path裁剪掉目标元素所在区域，实现镂空效果：

.highlight-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  clip-path: polygon(
    0% 0%, 0% 100%,
    var(--target-left) 100%, var(--target-left) var(--target-top),
    calc(var(--target-left) + var(--target-width)) var(--target-top),
    calc(var(--target-left) + var(--target-width)) calc(var(--target-top) + var(--target-height)),
    var(--target-left) calc(var(--target-top) + var(--target-height)),
    var(--target-left) 100%, 100% 100%, 100% 0%
  );
}