javascript - 如何让z-index=-1的元素接收点击事件？

Question

我有一个水平滚动的 div，里面有很多图像。 div 有一个 1- 内部阴影，它应该出现在它的子元素上 但是 2- child 应该能够接收指针事件。然而 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>

Answer 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