javascript - 指针事件 : none for inside of div and pointer-events: all for outside (reverse mode of normal div) - walkthrough tour container

Question

我正在为一个面板进行漫游，对于这个漫游指南，我需要在覆盖层上创建一个洞，这样底层元素只能从那个洞中点击。

我找到了一种在内部以某种方式实现它的方法，但我还需要防止针对该圆圈之外的底层元素。

注意:下面的示例是我正在制作的 React 组件的简化版本，我需要为焦点区域使用 border-radius 因为焦点区域将是一个动态区域并且可以从圆形变为方形(并且带过渡)根据指南下一步的目标元素。

任何基于 CSS 或 JavaScript 的解决方案都会很有帮助。 (但请不要使用 jQuery!)

提前谢谢你。

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

.guide{
  width: 9rem;
  height: 9rem;
  position: absolute;
  z-index: 10;
  top: 1.7rem;
  left: 11.5rem;
  border-radius: 9rem;
  box-shadow: 0 0 0 1000rem rgba(0,0,0,0.5);
  pointer-events: none;
}

<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="guide"></div>

Answer 1

使用 clip-path 的想法。你创建一个中间有一个圆圈的大元素，然后将它翻译到你想要的地方:

let precision = 64;
let radius = 1.7; /* control the radius here */
let c = [...Array(precision)].map((_, i) => {
  let a = -i/(precision-1)*Math.PI*2;
  let x = Math.cos(a)*radius + 50;
  let y = Math.sin(a)*radius + 50;
  return `${x}% ${y}%`
})

document.querySelector('.guide').style.clipPath = 
 `polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${c.join(',')})`;

/* credit to https://stackoverflow.com/a/63739677/8620333 for the code above */

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

.guide{
  width: 4000px;
  height: 4000px;
  position: fixed;
  top:-2000px;
  left:-2000px;
  transform:translate(16rem,5.8rem); /* adjust this*/
  background:rgba(0,0,0,0.5);
}

<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="guide"></div>