将点击事件转发给后面的元素

Question

I have two divs stacked together and one is behind the other.

<div style='position:relative;'>
  <div style='position: absolute; top:0; left:0;'>
    bottom element
  </div>
  <div style='position: absolute; top:0; left:0;'>
      top element
  </div>
</div>

I installed a click listener to both elements. However, only the top one gets the event. Some other posts suggest that I can use pointer-event:none to give up handling the click event from the top element. However, I want to handle the click events in both elements.

https://jsfiddle.net/zhu63v7o/

Answer 1

I'd love to see your JavaScript code but never the less, you can use the z-index property with the conditional statement for this. Also note that the container for both divs should be the one receiving the event while the divs are responding to the event

//style

 .inner_div{
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

//HTML

<div style="position: relative; width: 100px; height: 100px" onclick="myChange(document.querySelector('#one'))">
          <div class="inner_div" id="one" style="background: red">div 1</div>
          <div class="inner_div" id="two" style="background: green">div 2</div>
</div>

//Js

function myChange(x){
  if (x.style.zIndex == "1") {
    x.style.zIndex = "-1"
  }else{
    x.style.zIndex = "1"
  }
}