Pass mouse events through absolutely-positioned element

Question

I m attempting to capture mouse events on an element with another absolutely-positioned element on top of it   Right now  events on the absolutely-positioned element hit it and bubble up to its parent  but I want it to be  transparent  to these mouse events and forward them on to whatever is behind it  How should I implement this

User · Answer

The reason you are not receiving the event is because the absolutely positioned element is not a child of the element you are wanting to "click" (blue div). The cleanest way I can think of is to put the absolute element as a child of the one you want clicked, but I'm assuming you can't do that or you wouldn't have posted this question here :)

Another option would be to register a click event handler for the absolute element and call the click handler for the blue div, causing them both to flash.

Due to the way events bubble up through the DOM I'm not sure there is a simpler answer for you, but I'm very curious if anyone else has any tricks I don't know about!

User · Answer

If all you need is mousedown  you may be able to make do with the document elementFromPoint method  by    removing the top layer on mousedown  passing the x and y coordinates from the event to the document elementFromPoint method to get the element underneath  and then restoring the top layer

User · Answer

If you know the elements that need mouse events  and if your overlay is transparent  you can just set the z-index of them to something higher than the overlay   All events should of course work in that case on all browsers

User · Answer

Also nice to know    Pointer-events can be disabled for a parent element  probably transparent div  and yet be enabled for child elements  This is helpful if you work with multiple overlapping div layers  where you want to be able click the child elements of any layer  For this all parenting divs get pointer-events  none and click-children get pointer-events reenabled by pointer-events  all    parent       pointer-events none             child       pointer-events all      lt div class  some-container  gt      lt ul class  layer-0 parent  gt        lt li class  click-me child  gt  lt  li gt        lt li class  click-me child  gt  lt  li gt      lt  ul gt       lt ul class  layer-1 parent  gt        lt li class  click-me-also child  gt  lt  li gt        lt li class  click-me-also child  gt  lt  li gt      lt  ul gt   lt  div gt

User · Answer

There is a javascript version available which manually redirects events from one div to another   I cleaned it up and made it into a jQuery plugin   Here s the Github repository  https   github com BaronVonSmeaton jquery forwardevents  Unfortunately  the purpose I was using it for - overlaying a mask over Google Maps did not capture click and drag events  and the mouse cursor does not change which degrades the user experience enough that I just decided to hide the mask under IE and Opera - the two browsers which dont support pointer events

User · Answer

pointer-events  none   Is a CSS property that makes events  quot pass through quot  the element to which it is applied and makes the event occur on the element  quot below quot   See for details  https   developer mozilla org en-US docs Web CSS pointer-events It is not supported up to IE 11  all other vendors support it since quite some time  global support was   92  in 12  16   http   caniuse com  feat pointer-events  thanks to  s4y for providing the link in the comments

[javascript] Pass mouse events through absolutely-positioned element

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to events

Examples related to dom-events