Click through div to underlying elements

Question

I have a div that has background transparent  along with border  Underneath this div  I have more elements   Currently   I m able to click the underlying elements when I click outside of the overlay div  However  I m unable to click the underlying elements when clicking directly on the overlay div    I want to be able to click through this div so that I can click on the underlying elements

User · Answer

Another idea to try  situationally  would be to    Put the content you want in a div  Put the non-clicking overlay over the entire page with a z-index higher   make another cropped copy of the original div  overlay and abs position the copy div in the same place as the original content you want to be clickable with an even higher z-index    Any thoughts

User · Answer

I think that you can consider changing your markup  If I am not wrong  you d like to put an invisible layer above the document and your invisible markup may be preceding your document image  is this correct     Instead  I propose that you put the invisible  right after the document image but changing the position to absolute    Notice that you need a parent element to have position  relative and then you will be able to use this idea  Otherwise your absolute layer will be placed just in the top left corner      An absolute position element is positioned relative to the first parent   element that has a position other than static    If no such element is found  the containing block is html   Hope this helps  See here for more information about CSS positioning

User · Answer

This is not a precise answer for the question but may help in finding a workaround for it   I had an image I was hiding on page load and displaying when waiting on an AJAX call then hiding again however     I found the only way to display my image when loading the page then make it disappear and be able to click things where the image was located before hiding it was to put the image into a DIV  make the size of the DIV 10x10 pixels or small enough to prevent it causing an issue then hiding the containing div   This allowed the image to overflow the div while visible and when the div was hidden  only the divs area was affected by inability to click objects beneath and not the whole size of the image the DIV contained and was displaying   I tried all the methods to hide the image including CSS display none block  opacity 0  hiding the image with hidden true    All of them resulted in my image being hidden but the area where it was displayed to act like there was a cover over the stuff underneath so clicks and so on wouldn t act on the underlying objects    Once the image was inside a tiny DIV and I hid the tiny DIV  the entire area occupied by the image was clear and only the tiny area under the DIV I hid was affected but as I made it small enough  10x10 pixels   the issue was fixed  sort of    I found this to be a dirty workaround for what should be a simple issue but I was not able to find any way to hide the object in its native format without a container    My object was in the form of  etc    If anyone has a better way  please let me know

User · Answer

I couldn t always use pointer-events  none in my scenario  because I wanted both the overlay and the underlying element s  to be clickable   selectable  The DOM structure looked like this   lt div id  quot outerElement quot  gt      lt div id  quot canvas-wrapper quot  gt         lt canvas id  quot overlay quot  gt  lt  canvas gt      lt  div gt      lt  -- Omitted  element s  behind canvas that should still be selectable -- gt   lt  div gt    The outerElement  canvas-wrapper and canvas elements have the same size   To make the elements behind the canvas act normally  e g  selectable  editable   I used the following code  canvasWrapper style pointerEvents    none    outerElement addEventListener  mousedown   event   gt        const clickedOnElementInCanvas   yourCheck    TODO  check if the event  would  click a canvas element      if   clickedOnElementInCanvas                if necessary  add logic to deselect your canvas elements              wrapper style pointerEvents    none           return true                Check if we emitted the event ourselves  avoid endless loop      if  event isTrusted               Manually forward element to the canvas         const mouseEvent   new MouseEvent event type  event           canvas dispatchEvent mouseEvent           mouseEvent stopPropagation              return true       Some canvas objects also came with input fields  so I had to allow keyboard events  too  To do this  I had to update the pointerEvents property based on whether a canvas input field was currently focused or not  onCanvasModified canvas       gt        const inputFieldInCanvasActive      TODO  Check if an input field of the canvas is active      wrapper style pointerEvents   inputFieldInCanvasActive     auto     none

User · Answer

I m adding this answer because I didn   t see it here in full  I was able to do this using elementFromPoint  So basically    attach a click to the div you want to be clicked through hide it determine what element the pointer is on fire the click on the element there    var range-selector             css  position    absolute   addClass  range-selector        appendTo          click function e             range-selector hide               document elementFromPoint e clientX e clientY   trigger  click              In my case the overlaying div is absolutely positioned   I am not sure if this makes a difference  This works on IE8 9  Safari Chrome and Firefox at least

User · Answer

Allowing the user to click through a div to the underlying element depends on the browser  All modern browsers  including Firefox  Chrome  Safari  and Opera  understand pointer-events none   For IE  it depends on the background  If the background is transparent  clickthrough works without you needing to do anything  On the other hand  for something like background white  opacity 0  filter Alpha opacity 0    IE needs manual event forwarding   See a JSFiddle test and CanIUse pointer events

User · Answer

An easier way would be to inline the transparent background image using Data URIs as follows    click-through       pointer-events  none      background  url data image gif base64 R0lGODlhAQABAIAAAAAAAP   yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

User · Answer

it doesn t work that way  the work around is to manually check the coordinates of the mouse click against the area occupied by each element   area occupied by an element can found found by 1  getting the location of the element with respect to the top left of the page  and 2  the width and the height  a library like jQuery makes this pretty simple  although it can be done in plain js  adding an event handler for mousemove on the document object will provide continuous updates of the mouse position  from the top and left of the page  deciding if the mouse is over any given object consists of checking if the mouse position is between the left  right  top and bottom edges of an element

User · Answer

Nope  you can t click    through    an element  You can get the co-ordinates of the click and try to work out what element was underneath the clicked element  but this is really tedious for browsers that don t have document elementFromPoint  Then you still have to emulate the default action of clicking  which isn t necessarily trivial depending on what elements you have under there   Since you ve got a fully-transparent window area  you ll probably be better off implementing it as separate border elements around the outside  leaving the centre area free of obstruction so you can really just click straight through

User · Answer

Yes  you CAN do this    Using pointer-events  none along with CSS conditional statements for IE11  does not work in IE10 or below   you can get a cross browser compatible solution for this problem   Using AlphaImageLoader  you can even put transparent  PNG  GIFs in the overlay div and have clicks flow through to elements underneath   CSS   pointer-events  none  background  url  your transparent png      IE11 conditional   filter progid DXImageTransform Microsoft AlphaImageLoader src  your transparent png   sizingMethod  scale    background  none  important    Here is a basic example page with all the code

User · Answer

Just wrap a tag around all the HTML extract  for example   lt a href   categories 1  gt     lt img alt  test1  class  img-responsive  src   assets photo jpg    gt     lt div class  caption bg-orange  gt       lt h2 gt        test1      lt  h2 gt     lt  div gt   lt  a gt    in my example my caption class has hover effects  that with pointer-events none  you just will lose   wrapping the content will keep your hover effects and you can click in all the picture  div included  regards

User · Answer

You can place an AP overlay like      overlay     position  absolute    top  -79px    left  -60px    height  80px    width  380px    z-index  2    background  url fake gif          lt div id  overlay  gt  lt  div gt    just put it over where you dont want ie cliked  Works in all

User · Answer

I currently work with canvas speech balloons  But because the balloon with the pointer is wrapped in a div  some links under it aren t click able anymore  I cant use extjs in this case   See basic example for my speech balloon tutorial requires HTML5   So I decided to collect all link coordinates from inside the balloons in an array   var clickarray     function getcoo thatdiv            thatdiv find   link   each function                     var offset   this  offset                                clickarray unshift   offset left                                         offset top                                         offset left   this  width                                           offset top   this  height                                             this  attr  name                                          1                                                          I call this function on each  new  balloon  It grabs the coordinates of the left top and right down corners of a link class - additionally the name attribute for what to do if someone clicks in that coordinates and I loved to set a 1 which means that it wasn t clicked jet  And unshift this array to the clickarray  You could use push too   To work with that array      body   click function event             event preventDefault     if it is a a-tag           var x event pageX            var y event pageY            var job               for var i in clickarray                 if x gt  clickarray i  0   amp  amp  x lt  clickarray i  2   amp  amp  y gt  clickarray i  1   amp  amp  y lt  clickarray i  3   amp  amp  clickarray i  5   1                    job clickarray i  4                    clickarray i  5  0   set to allready clicked                  break                                             if job length gt 0                      --do some thing with the job --                               This function proofs the coordinates of a body click event or whether it was already clicked and returns the name attribute  I think it is not necessary to go deeper  but you see it is not that complicate  Hope in was enlish

User · Answer

Hide overlaying the element  Determine cursor coordinates  Get element on those coordinates  Trigger click on element  Show overlaying element again       elementontop   click e   gt            elementontop   hide          document elementFromPoint e clientX  e clientY   trigger  click            elementontop   show

User · Answer

I needed to do this and decided to take this route       overlay   click function e       var left     window  scrollLeft        var top     window  scrollTop           hide the overlay for now so the document can find the underlying elements       this  css  display   none          use the current scroll position to deduct from the click position       document elementFromPoint e pageX-left  e pageY-top   click          show the overlay again       this  css  display   block

User · Answer

Yes  you CAN force overlapping layers to pass through  ignore  click events  PLUS you CAN have specific children excluded from this behavior    You can do this  using pointer-events  pointer-events influences the reaction to click-  tap-  scroll-  und hover events    In a layer that should ignore   pass-through mentioned events you set pointer-events  none    Children of that unresponsive layer that need to react mouse   tap events again need  pointer-events  auto     That second part is very helpful if you work with multiple overlapping div layers  probably some parents being transparent   where you need to be able to click on child elements and only that child elements  Example usage       lt style gt           parent               pointer-events none                             child               pointer-events auto                 lt  style gt            lt div class  quot parent quot  gt         lt a href  quot   quot  gt I m unresponsive lt  a gt         lt a href  quot   quot  class  quot child quot  gt I m clickable again  wohoo   lt  a gt       lt  div gt

User · Answer

I think the event stopPropagation    should be mentioned here as well  Add this to the Click function of your button   Prevents the event from bubbling up the DOM tree  preventing any parent handlers from being notified of the event

[css] Click through div to underlying elements

Examples related to css