jQuery - Click through elements - html

Question

I have two overlapping boxes. Structurally, they are residing side by side in the DOM. The blue one is absolutely positioned and overlaps the red box. I attached two click handlers on each of the boxes with jQuery.
Now, what I want to achieve is that as soon as I click on the intersection of the blue and red boxes, both the click handler of red and blue should be triggered. Now at the moment, only the blue mouse click callback is executed since it is lying on top of red.
I know that I can set pointer-events: none on the blue box but then I only get the event for the red div.
Here is a fiddle for clarification:
https://jsfiddle.net/nas2jg7t/1/

Answer 1

This is as simple as this, check to see if the click occurred within the bounds of the red div and whether the click was fired by the blue div, if so, fire the red div click event:
jQuery(document).ready(function(){
jQuery("body").on("click","#red,#blue", function(elem){
//Get the bottom y coordinate of the red div
const bottomRed = $('#red')[0].getBoundingClientRect().bottom;
//logging test for id of element
console.log(elem.target.id);
//check to see if the click event fell within the red div's boundary
//and if the blue div fired the event, if so, fire red div event
if(elem.pageY <= bottomRed && elem.target.id === "blue"){
$('#red').trigger('click');
}
});
});
Working fiddle: (https://jsfiddle.net/vd0wfspk/1/)

Answer 2

Try having the two elements nested in the DOM and calling event.stopPropagation();
In your case elem.stopPropagation();

Answer 3

You don't have many solution as I know, you need to calculate if the pointer click is inside or not the other div :
jQuery(document).ready(function () {
jQuery("body").on("click", "#red,#blue", function (event) {
console.log(event.target.id);
jQuery("#result").text("Clicked on " + event.target.id);
var otherDiv = jQuery("#red, #blue").not(this);
if (otherDiv.offset().top <= event.pageY &&
otherDiv.offset().top + otherDiv.height() >= event.pageY &&
otherDiv.offset().left <= event.pageX &&
otherDiv.offset().left + otherDiv.width() >= event.pageX) {
otherDiv.trigger('click');
}
});
});

Answer 4

You can use event clientX and clientY in order to get mouse position:
jQuery("body").on("click","#red, #blue", function(e) {
var x = e.clientX;
var y = e.clientY;
var bluPosminX = $('#blue').position().left;
var bluPosmaxX = bluPosminX + $('#blue').width();
var bluPosminY = $('#blue').position().top;
var bluPosmaxY = bluPosminY + $('#blue').height();
var redPosminX = $('#red').position().left;
var redPosmaxX = redPosminX + $('#red').width();
var redPosminY = $('#red').position().top;
var redPosmaxY = redPosminY + $('#red').height();
var clickedto = ""
if (x >= bluPosminX && x <= bluPosmaxX && y >= bluPosminY && y <= bluPosmaxY) {
clickedto += ' blue';
}
if (x >= redPosminX && x <= redPosmaxX && y >= redPosminY && y <= redPosmaxY) {
clickedto += ' red';
}
jQuery("#result").text("Clicked on " + clickedto);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red" style="width:200px; height: 200px; background: red"></div>
<!-- Box blue -->
<div id="blue" style="width:200px; height: 200px; background: blue;position:absolute;top:80px; opacity: 0.7"></div>
<div id="result" style="position: relative; top: 100px;"></div>