允许用户点击 div 空白区域下的元素吗？

Question

我有一个元素，它是顶级 dom 元素。 我决定在顶部构建一个用户界面，允许将项目放置在interface-overlay 。 似乎我无法单击interface-overlay内的任何内容，但我可以单击底层元素？

当然，我想单击底层元素，但我也希望能够单击覆盖层，并单击覆盖层没有任何 dom 元素覆盖它的底层元素。

我使用了这个，但它似乎阻止了所有空间：

pointer-events: none;

如果我删除pointer-event属性，它会翻转问题。 我可以点击叠加层，但不能点击底层元素。

代码笔显示问题： https : //codepen.io/samhabbo/pen/ExymBBK

Answer 1

一种选择是将pointer-events: none应用于父容器，然后在子元素上将其重置回auto ：

.interface-overlay {
  /* ... */
  pointer-events: none;
}

.interface-overlay > * {
  pointer-events: auto;
}

 html, body { margin: 0; } .tile { opacity:0.8; background-color:#ccc; position:fixed; width:100%; height:100%; top:0px; left:0px; padding: 50px; } .interface-overlay { position: absolute; z-index: 5; width: 100%; height: 100%; padding-left: 20px; color: #FFFF; pointer-events: none; } .interface-overlay > * { pointer-events: auto; } button.button { background-color: red; }

 <div class="interface-overlay"> <button class="button">Overlay button</button> </div> <div class="tile"> Some tile content. <button class="button" onclick="alert('test');">Underlying button</button> </div>