How can I get 3 divs overlayed to allow click-through that fires all underlying div's event handlers?

Question

I have 3 divs overlayed like so:

<div id="div1" style="height: 500px; width: 500px; position:absolute; z-index: 1"></div>
<div id="div2" style="height: 500px; width: 500px; position:absolute; z-index: 2"></div>
<div id="div3" style="height: 500px; width: 500px; position:absolute; z-index: 3"></div>

All of them have on.click event handlers that pop up different messages

Is it possible that when clicking one, no matter which one is on top, it allows all underlying divs with click through (tried "pointer events: none" but that disables all functionality) to fire their respesctive event handlers? Say that I click on div 3 and div 2 and 3 fire their event handlers as well. Also, I don't want hardcoded solutions like:

$('#div3').on('click',function() {
   // trigger div 1 and 2 events manually
})

The problem with pointer events: none is that whoever has it, won't trigger it's event handler like I want it, any way to fix that?

Why not using a class for all three divs and use that class click event? — Sam Battat, Jan 23 '15 at 18:28
As I understand it, using `pointer events` is not a good idea because it doesn't have good support. I think the hardcoded solution with jquery would be the way to go — Joe Sager, Jan 23 '15 at 18:39
The problem with class hard-coding is that sometimes the underlying div will not be the same size as the one on top, and hardcoding class event handlers will trigger all underlying elements, even if the mouse wasn't exactly on top of the underlying one's of various sizes. — sgarcia.dev, Jan 23 '15 at 19:06

score 2 · Accepted Answer · answered Jan 23 '15 at 19:07

I'm not sure if this solution is too "hardcoded" for you, but it will detect any elements behind the front element and trigger their click handlers (if the mouse click was also located above that element)

$('#div3').click(function(e) {
$(this).hide();
var elements = [];
var element;
var count = 0;
element = $(document.elementFromPoint(e.clientX,e.clientY));
while (element.prop("tagName") != "HTML" && count < 15) {
    elements.push(element);
    $(element).hide();
    element = $(document.elementFromPoint(e.clientX,e.clientY));
    count++;
}
$(elements).each(function() {
    $(this).trigger("click");
    $(this).show();
});
$(this).show();
});

Fiddle: http://jsfiddle.net/13jLrarp/3/

The count is there to make sure it doesn't get stuck in an infinite loop (just in case) though it technically isn't required

In the fiddle, clicking the green box will make the red box grow horizontally and clicking the blue box will make the red box grow vertically. Clicking where they overlap makes the red box grow both ways. Notice that using z-index the red box is placed on top of the other two

That's EXACTLY what I was looking for! Thank you so much. Funnily enough, I found code similar to this about a week ago after hours of google searching for this question, but back then I wasn't in a rush to use it. The problem now was finding it again, but googling something like this isn't easy and in the end I ended up here in SO, Thanks so much! — sgarcia.dev, Jan 23 '15 at 19:20

score 0 · Answer 2 · answered Jan 23 '15 at 18:38

0



    $( "#other" ).click(function() {
      $( "#target" ).click();
    });

Source: http://api.jquery.com/click/

answered Jan 23 '15 at 18:38

kishanW

49
4

You missed the part where OP said no hardcoded solutions like the one you just posted – Joe Sager Jan 23 '15 at 18:40
You will be getting a lot of down voting, you better explain yourself now :) – Sam Battat Jan 23 '15 at 18:40
Problem with that is the one on top might be 500px by 500px big, and the one under it 50px by 50px, and if I click on an area where the top is shown but the one under isn't then the underlaying div will get it's click event get called even if the cursor wasn't on top of it. – sgarcia.dev Jan 23 '15 at 19:05
@Sam Battat & @ Joe Sager: You guys are correct, totally missed that. That would be my mistake :) So i guess the better option would be to wrap the three divs with a parent then listen to click events for any child then trigger the click event for all the other children of a certain type (using attributes or classes)? – kishanW Jan 30 '15 at 16:24

How can I get 3 divs overlayed to allow click-through that fires all underlying div's event handlers?

2 Answers2