Z-index可防止项目被点击

Question

我有一个带有插入阴影的容器div，我在这个容器里面也有子元素，我只想让这些孩子可以点击。

设置子项（我的项目中的图像，不确定是否重要）元素的z-index为-1对于显示阴影至关重要。但这样做容器将覆盖子元素，因此点击赢了工作。

设置指针事件：无;容器元素上的任何一个都没有帮助（我也希望容器可以滚动）。

＆＃13;

＆＃13;

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

＆＃13;

    .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 */
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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 out：https://jsfiddle.net/anik786/5oe841sw/6/

这是一个截图：