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

javascript html dom events click
Steven Schlansker picture Steven Schlansker · Sep 9, 2009 · Viewed 161.9k times · Source

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 clicking on any links/buttons/etc. Is there a way to have its content float on top of everything (it's semi-transparent, so you can still see what is behind) and have the user interact with the layer below it?

I've found a lot of information on the DOM event model, but none of it addresses the problem where the buttons and other "native" controls never seem to get the clicks in the first place.

Answer

Flatliner DOA picture Flatliner DOA · Nov 14, 2014

A silly hack I did was to set the height of the element to zero but overflow:visible; combining this with pointer-events:none; seems to cover all the bases.

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}

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
Pass mouse events through absolutely-positioned element

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 …

Read More