使父 div 不可点击，但子 div 可点击 - CSS

Question

在这样的场景中，我希望能够通过顶部 div 单击背景 div（红色），同时仍然能够单击顶部 div 的子级（蓝色和绿色）。

function bgclick() {
  console.log('Background Is Clicked!');
}

function topclick() {
  console.log('Top Is Clicked!');
}

#background {
  background-color: #f33;
  width: 250px;
  height: 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

#top {
  width: 250px;
  height: 250px;
  position: fixed;
  top: 0;
  left: 0;
}

.children {
  width: 50px;
  height: 50px;
  position: relative;
}

<div id="background" onclick="bgclick()"></div>
<div id="top">
  <div class="children" onclick="topclick()" style="background-color:#3f3"></div>
  <div class="children" onclick="topclick()" style="background-color:#33f"></div>
</div>

我玩过pointer-events: none。这只会使一个可点击，而另一个则不可点击。我怎样才能做到这样我可以点击红色的并收到一条消息，以及蓝色和绿色的消息？

Answer 1

要使父 div 不可点击但子 div 可点击，只能使用指针事件。

指针事件

该元素永远不是指针事件的目标；但是，如果这些后代将指针事件设置为某个其他值，则指针事件可能会以其后代元素为目标。在这些情况下，指针事件将在事件捕获/冒泡阶段期间在往返子元素的途中酌情触发此父元素上的事件侦听器。

有关其工作原理的更多信息，请参见指针事件

.parent { 
    pointer-events: none;
}

.child {
    pointer-events: auto;
}