html - 具有负 z-index 的元素上的单击事件

Question

我有一个具有部分透明背景的父元素。该元素内部有一个子元素。并且我需要在父元素的背景中显示子元素，所以我将 z-index: -1 设置为子元素。

这是一个代码笔示例:https://codepen.io/anon/pen/xpVbPa

灰色方 block 是子元素。我需要处理点击它。怎么做？我试图在父元素上设置 pointer events: none，它不起作用。

Answer 1

使用带有背景的伪元素并向其添加pointer-events: none。

Codepen

function childClick() {
  alert('click!');
}

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 50px;
  position: relative;
}

.parent:after {
  content: '';
  background: url(https://image.ibb.co/fAYr5R/585e4ad1cb11b227491c3391.png);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.child {
  width: 150px;
  height: 150px;
  background-color: gray;
  cursor: pointer;
  position: absolute;
}

<div class="parent">
  <div class="child" onclick="childClick()"></div>
</div>