click_z-index-1_elem

by namnium1125

HTML

<div id="wrapper">
  <a href="#" class="back" id="link">link</a>
  <button onclick="alert('buttonClicked');" class="back" id="button">button</button>
</div>

CSS

.back {
  z-index: -1;
}

#wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 500px;
}
#link {
  position: absolute;
  top: 10px;
  left: 10px;
}
#button {
  position: absolute;
  top: 50px;
  left: 10px;
}

JavaScript

$(function(){
  var wrapper = $("#wrapper");
  var children = wrapper.children();

  wrapper.on("click",function(e){
    children.each(function(ind,elem){
      var pos = $(elem).position();
      if((pos.top <= e.offsetY && e.offsetY <= (pos.top+$(elem).height())) && (pos.left <= e.offsetX && e.offsetX <= (pos.left+$(elem).width()))){
        elem.click();
      }
    });
  });
});