Invoke click events on two superimposed, non-hiera

Question

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)

Answer 1

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

working example