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

Question

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

User · Answer

I was having this issue when viewing my website on a phone  While I was trying to close the overlay  I was pretty much clicking on anything under the overlay  A solution that I found working for myself is to just add a tag around the entire overlay

User · Answer

Generally  this isn t a great idea  Taking your scenario  if you had evil intentions  you could hide everything underneath your  overlay   Then  when a user clicks on a link they think should take them to bankofamerica com  instead it triggers the hidden link which takes them to myevilsite com    That said  event bubbling works  and if it s within an application  it s not a big deal  The following code is an example  Clicking the blue area pops up an alert  even though the alert is set on the red area  Note that the orange area does NOT work  because the event will propagate through the PARENT elements  so your overlay needs to be inside whatever element you re observing the clicks on  In your scenario  you may be out of luck    lt html gt   lt head gt   lt  head gt   lt body gt       lt div id  outer  style  position absolute height 50px width 60px z-index 1 background-color red top 5px left 5px   onclick  alert  outer    gt            lt div id  nested  style  position absolute height 50px width 60px z-index 2 background-color blue top 15px left 15px   gt           lt  div gt       lt  div gt       lt div id  separate  style  position absolute height 50px width 60px z-index 3 background-color orange top 25px left 25px   gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

In case anyone else is running in to the same problem  the only solution I could find that satisfied me was to have the canvas cover everything and then to raise the Z-index of all clickable elements   You can t draw on them  but at least they are clickable

User · Answer

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

User · Answer

You can use an overlay with opacity set in order to the buttons anchors in the back stay visible  but once you have that overlay over an element  you can t click it

User · Answer

How about this for IE    onmousedown  Hide all elements which could overlay the event  Because display none visibility hidden not realy works  push the overlaying div out of the screen for a fixed number of pixels  After a delay push back the overlaying div with the same number of pixels   onmouseup  Meanwhile this is the event you like to fire           script      var allclickthrough                   function hidedivover                  if allclickthrough length  0                   allclickthrough getElementsByClassName document body  clickthrough      if so  parentNode                                 for var i 0 i lt allclickthrough length i                      allclickthrough i  style left parseInt allclickthrough i  style left  2000  px                                    setTimeout function   showdivover    1000                          function showdivover                 for var i 0 i lt allclickthrough length i                     allclickthrough i  style left parseInt allclickthrough i  style left -2000  px                                                 html      lt span onmouseup  Dreck he got me    gt Click me if you can  lt  span gt       lt div  onmousedown  hidedivover    style  position absolute  class  clickthrough  gt You ll don t get through  lt  div gt

User · Answer

For the record an alternative approach might be to make the clickable layer the overlay  you make it semi-transparent and then place the  overlay  image behind it  somewhat counterintuitively  the  overlay  image could then be opaque   Depending on what you re trying to do  you might well be able to get the exact same visual effect  of an image and a clickable layer semi-transparently superimposed on top of each other   while avoiding clickability problems  because the  overlay  is in fact in the background

User · Answer

My team ran into this issue and resolved it very nicely     add a class  passthrough  or something to each element you want clickable and which is under the overlay   for each   passthrough  element append a div and position it exactly on top of its parent  add class  element-overlay  to this new div    The   element-overlay  css should have a high z-index  above the page s overlay   and the elements should be transparent     This should resolve your problem as the events on the   element-overlay  should bubble up to   passthrough   If you still have problems  we did not see any so far  you can play around with the binding   This is an enhancement to  jvenema s solution    The nice thing about this is that    you don t pass through ALL events to ALL elements  Just the ones you want   resolved  jvenema s argument  All events will work properly   hover for example      If you have any problems please let me know so I can elaborate

User · Answer

Add pointer-events  none  to the overlay     Original answer  My suggestion would be that you could capture the click event with the overlay  hide the overlay  then refire the click event  then display the overlay again  I m not sure if you d get a flicker effect though    Update  Exactly this problem and exactly my solution just appeared in this post   Forwarding Mouse Events Through Layers   I know its probably a little late for the OP  but for the sake of somebody having this problem in the future  I though I would include it

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

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to events

Examples related to click