2

Elements A and B are not parent and child. Element A is layered (transparently) over the top of Element B. Element B has a button on it.

I want clicking on the button to trigger click events on both A and B.

If B were a child of A (or vice-versa) this would happen automatically (HTML event bubbling JustWorks like that), and event.stopPropagation() would allow me to prevent this if I needed to.

If I wanted the click to pass through the top-most layer (A) and invoke the button on B, then I would use pointer-events:none but that means that NO event is triggered on A.

Can this be achieved? See JSFiddle: https://jsfiddle.net/7mhb5e7c/ I want both events to be fired from a single click.

(For reference, this is not directly my problem, merely my current favourite design for the fix. My actual problem is over here. If you have a better solution that solves the real problem feel free to comment over there. But I'd like to know whether this design is possible for general knowledge, even if it's not the best fix)

Community
  • 1
  • 1
Brondahl
  • 7,402
  • 5
  • 45
  • 74
  • Feed us with some code, will helpful to solve your issue. – divy3993 Jun 15 '15 at 19:00
  • I don't think it's the best approach, if both layers have interactive elements, they shouldnt be overlapped, better use tabs or something. That doesn't make a lot of sense. – user2755140 Jun 15 '15 at 19:03
  • You could use something like this http://stackoverflow.com/a/3735306/1469259 – CupawnTae Jun 15 '15 at 19:05
  • @DaseinA I agree I don't think it's ideal, so if you have a better solution to my actual problem (now linked) I'd be very grateful indeed. – Brondahl Jun 15 '15 at 19:20
  • I told you: use tabs or something different. Overlapping the elements will get you stuck for any good reason. – user2755140 Jun 15 '15 at 19:25
  • @DaseinA "Use tabs" or "do it differently" aren't solutions to my problem. Have you looked at the details of the problem that I linked to? – Brondahl Jun 15 '15 at 19:33
  • @Brondahl have a good day. – user2755140 Jun 15 '15 at 19:35
  • @DaseinA and you. All the best. – Brondahl Jun 15 '15 at 19:38
  • What if you called a function on click, passed mouse position as param and then iterated through all your buttons doing collision tests..? – Zze Jun 15 '15 at 22:39
  • @Zze Ugh .. that would be horrible. However it seems kinda like that's the only way it could be done given the lack of better answers. Sad times. – Brondahl Jun 16 '15 at 08:15
  • Very sad times... Not sure how else you would do it though unfortunately. – Zze Jun 16 '15 at 22:13

1 Answers1

0
$('.filter-layer').on('click',function(e) { 
    alert('filter clicked'); 
});
$('button').on('click',function(e) { 
    $('.filter-layer').trigger('click');
    alert('button clicked'); 
});

working example

HelloWorld
  • 2,480
  • 3
  • 28
  • 45
  • I agree that this works for that one scenario, but for my actual purpose (put a transparent layer over the entire page) it's not feasible as that line would be required everywhere. – Brondahl Jun 16 '15 at 08:13