如何使z-index = -1的元素接收點擊事件？

Question

我有一個水平滾動的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> 

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

Answer 2

這幾乎可以滿足您的需求。 如果您不希望div移動，則必須將其位置設置為fixed，並將其放在窗口上的正確位置。 我認為最好將第三個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>