Forward a click event to the element behind

user_809565 0
Viewed 46

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/

html javascript
1 Answers

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"
  }
}
user_198547860
Related