jquery - 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 后面，这意味着用户实际上正在单击 。容器，而不是.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/

这是屏幕截图: