Pass mouse events through an element that is fixed in place.

Problem

I’m trying to catch mouse events on an element that has another element on top of it that is completely positioned.

Events on the absolutely-positioned element currently 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 beneath it. How should I go about putting this into action?

Asked by s4y

Solution #1

pointer-events: none;

Is a CSS property that makes events “pass through” the HTML-element to which the property is applied. It makes the event occur on the element “below”.

See for details: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

It is supported by practically all browsers, including Internet Explorer 11; global support was 98.2% in May of this year): (Thanks to @s4y for supplying the link in the comments). http://caniuse.com/#feat=pointer-events

Answered by JanD

Solution #2

You might be able to get by with the document if all you need is mousedown. elementFromPoint is a method created by:

Answered by Jed Schmidt

Solution #3

It’s also good to know… Pointer events can be turned off for a parent element (often a transparent div) but turned on for children. This is useful if you deal with numerous overlapping div layers and want to be able to click any layer’s child items. All parenting divs receive pointer-events as a result of this: pointer-events: all reenables none and click-pointer-events. children’s

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:all;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

Answered by Allisone

Solution #4

Because the perfectly positioned element is not a child of the element you wish to “click,” you are not receiving the event (blue div). The cleanest solution I can think of is to make the absolute element a child of the one you want to click, but I’m guessing you can’t do that because you wouldn’t have asked this issue here:)

Another method is to register a click handler for the absolute element and then call the blue div’s click handler, causing both to flash.

I’m not sure there’s a simpler approach for you because of the way events bubble up through the DOM, but I’m curious if anyone else has any methods I’m not aware of!

Answered by Loktar

Solution #5

A javascript version that manually redirects events from one div to another is available.

It was cleaned up and converted into a jQuery plugin.

Here’s the link to the repository on Github: 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.

Answered by Mikepote

Post is based on https://stackoverflow.com/questions/1009753/pass-mouse-events-through-absolutely-positioned-element