如何仅允许指定单一元素响应pointer-events，其余区域不可点击

可行实现方案 #

以下是3种适配你需求的实现方式，可根据场景选择：

• 方案1：基于现有两个元素实现（最推荐，适配拖拽需求） #

  利用层级控制，让可点击区域高于全屏遮罩，其余区域的点击都会被遮罩拦截：

  /* 原id为2的全屏遮罩层 */
  #2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3); /* 不需要可见可设为transparent */
    z-index: 999;
  }
  
  /* 原id为1的可点击区域 */
  #1 {
    position: relative;
    z-index: 1000; /* 层级高于遮罩，区域内所有元素都可以正常点击、拖拽 */
  }
  

  该方案不需要修改现有DOM结构，兼容性最好，也不需要额外JS逻辑。

• 方案2：单元素镂空遮罩实现（符合超大边框覆盖全页的需求） #

  不需要额外兄弟节点，用单个遮罩元素挖空可点击区域即可：

  <!-- 新增单个遮罩元素 -->
  <div class="hollow-mask"></div>
  

  .hollow-mask {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.3);
    /* 按#1元素的坐标挖空区域，坐标可通过JS动态获取#1的位置尺寸实时更新 */
    clip-path: polygon(
      0% 0%, 0% 100%, 100% 100%, 100% 0%,
      /* 以下参数替换为#1元素的left、left+width、top+height、top对应数值即可 */
      100px 100px, 400px 100px, 400px 300px, 100px 300px, 100px 100px
    );
  }
  

  如果#1的位置会跟随拖拽变动，只需用JS监听拖拽事件，实时更新clip-path里的坐标参数即可。

• 方案3：JS全局事件拦截（不需要修改DOM和CSS） #

  直接通过事件捕获拦截所有非可点击区域的点击事件：

  document.addEventListener('click', function(e) {
    const allowArea = document.getElementById('1');
    // 点击目标不在允许区域内时直接拦截事件
    if (!allowArea.contains(e.target)) {
      e.stopPropagation();
      e.preventDefault();
      return false;
    }
  }, true); // 捕获阶段触发，保证拦截优先级最高
  

  该方案适合不想修改样式结构的场景，除点击外也可以用同样逻辑拦截mousedown、touchstart等事件适配移动端。

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