Z-index 防止项目被点击

Question

我有一个带有嵌入阴影的容器 div，我在这个容器内也有子元素，我只是希望这些子元素是可点击的。

将子元素（我项目中的图像，不确定是否重要）元素的 z-index 设置为 -1 对于显示投影至关重要。但是这样做容器会覆盖子元素，所以单击不起作用。

设置指针事件：无；在容器元素上也没有帮助（我也希望容器是可滚动的）。

$('.item').on('click', function() {
  alert($(this).attr('id'));
});

    .container {
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      box-shadow: inset 0 0 10px black;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .item {
      width: 250px;
      height: 80px;
      margin: 3px 0;
      background-color: #cacaca;
      position: relative;
      text-align: center;
      z-index: -1;
      /*Shadow visible, JS doesn't work*/
      /*z-index: 0;*/
      /*Clickable, but shadow is covered */
    }

<div class="container">
  <div class="item" id="item1">
    <p>CLICK</p>
  </div>
  <div class="item" id="item2">
    <p>CLICK</p>
  </div>
  <div class="item" id="item3">
    <p>CLICK</p>
  </div>
  <div class="item" id="item1">
    <p>CLICK</p>
  </div>
</div>

JSFiddle

如何保持阴影，并使子元素可点击？

Answer 1

为什么会发生

发生这种情况的原因是 .item 类的 div 在 .container 后面，这意味着用户实际上是在点击 .container，而不是 .item。

解决方案

你可以用这样的包装器来包装你的 div：

<div class="container">
    <div class="item" id="item1">
        <div><p>CLICK</p></div>
    </div>

    <div class="item" id="item2">
        <div><p>CLICK</p></div>
    </div>    

    <div class="item" id="item2">
        <div><p>CLICK</p></div>
    </div>

    <div class="item" id="item3">
        <div><p>CLICK</p></div>
    </div>
</div>

并将您的 CSS 从 .item 更新为 .item > div [但保留 JS 原样]

这样，外部的.item 仍然在.container 的前面，内部的div 在.container 的后面，这意味着它仍然是可点击的，并且您可以获得所需的样式！

证明它有效！

检查以下JS Fiddle：https://jsfiddle.net/anik786/5oe841sw/6/

截图如下：