如何使 z-index=-1 的元素接收点击事件？答案

【问题标题】：How to make an element with z-index=-1 receive click events?如何使 z-index=-1 的元素接收点击事件？
【发布时间】：2018-02-11 18:09:27
【问题描述】：

我有一个水平滚动的 div，里面有很多图像。 div 有一个 1- 内阴影，应该出现在它的孩子身上，但 2- 孩子应该能够接收指针事件。然而 3- div 也应该能够接收一些指针事件以启用滚动。我一直在寻找和思考几个小时。而且我找不到任何解决方案来同时完成所有这三个任务。有谁知道我该如何完成这项工作？

这是我的代码：

div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 150px;
  width: 100px;
  white-space: nowrap;
  box-shadow: inset 0 0 10px #000000;
  pointer-events:none;
}

div > img{
  z-index:-1;
  position:relative;
}

<div>
  <img onclick="alert()" src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
</div>

【问题讨论】：

没办法。这就是我在解决您上一个问题时指出的缺点。将元素推到负 z-index 会使他无法访问。您肯定需要在块上的阴影和填充之间找到折衷。
@VitaliiChmovzh 问题是阴影是为了给人一种div里面的东西就像在页面后面一样在场景下的感觉。填充解决方案可以解决顶部和底部的问题，但是当某些元素被滚动出 div 时，它会在侧面看起来很傻。是否可以使用 div::before 解决方案实现我想要的？我试了一次，还是不行。
:before 解决方案会给您同样的问题，即不允许单击图像。它会在您的 div 顶部产生伪元素 :( 您需要在这里查看不同的选项。也许将所有内容包装到另一个带有阴影的容器中，并为您的内部 div 使用负边距，以便它位于阴影之下。我不不知道。你需要自己玩这个。
把内部图片放在单独的标签里会不会有问题？
只要满足我的3个要求就可以了。

标签： javascript jquery html css events

【解决方案1】：

我可能不了解所有的限制条件，但也许您可以将内部图像包装到另一个 html 元素中？例如：

  <div>
    <figure onclick="alert('hello')">
      <img src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
    </figure>
    <figure onclick="alert('goodbye')">
      <img src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
    </figure>
  </div>

并使用以下 css：

div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 150px;
  width: 100px;
  white-space: nowrap;
  box-shadow: inset 0 0 10px #000000;
  position: relative;
}

figure {
  /* just for this example: */
  height: 50%; 
  width: 150%;
  margin: 0;
}

div img{
  z-index:-1;
  position:relative;
}

你可以在这里玩这个：https://jsbin.com/kuzawemame/edit?html,css,output

【讨论】：

我认为这就是他所追求的。作为旁注，figure{pointer-events:auto} 并不是真正需要的，因为这是默认值，您不再需要在父级中更改它
这样一个简单而精彩的答案！

【解决方案2】：

这几乎可以满足您的需求。如果您希望 div 不移动，则必须将其位置设置为固定并将其放在您希望它在窗口上的位置。我认为最好使用第三个 div 进行阴影，而不是将您关心的元素推到后面。

div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 150px;
  width: 100px;
  white-space: nowrap;
  position:relative;
}

div::before {
  content: '';
  position: absolute;
  width:100%;
  height:100%;
  box-shadow: inset 0 0 10px #000000;
  pointer-events:none;
}

<div>
  <img onclick="alert()" src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
  <img onclick="alert()" src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
</div>

【讨论】：