Pass mouse events through absolutely-positioned element

javascript html events dom javascript-events
s4y picture s4y · Jun 18, 2009 · Viewed 113.4k times · Source

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?

Answer

JanD picture JanD · Jun 22, 2011 
pointer-events: none;

Is a CSS property that makes events "pass through" the element to which it is applied and makes the event occur on the element "below".

See for details: https://developer.mozilla.org/en/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).

Related questions

Getting value of HTML Checkbox from onclick/onchange events

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" /> From within onClickHandler and/or onChangeHandler, how can I determine what is the new state of the checkbox?

Read More
How to stop event propagation with inline onclick attribute?

Consider the following: <div onclick="alert('you clicked the header')" class="header"> <span onclick="alert('you clicked inside the header');">something inside the header</span> </div> How can I make it so …

Read More
HTML "overlay" which allows clicks to fall through to elements behind it

I'm trying to overlay a element on top of a webpage (to draw arbitrary graphics), and I've come to the point where I can stack it inside of a element on top of everything, but this prevents the user from …

Read More