Advertisement
Advertisement


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.

My Problem

2018/12/29
1
1630
12/29/2018 8:52:30 PM

Accepted 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.

2695
4/23/2015 7:58:49 PM

Also nice to know...
You can disable pointer-events in a parent element (probably transparent div) but have it still enabled for its child elements.
This is helpful if you work with multiple overlapping div layers, where you want to be able to click child elements, while having the parent layers not react on any mouse events at all.

For this all parenting divs get pointer-events: none and its clickable children get pointer-events reenabled by pointer-events: auto

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

<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>
2020/01/07

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.

2019/08/12

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.

2016/05/04

  1. Hide overlaying the element
  2. Determine cursor coordinates
  3. Get element on those coordinates
  4. Trigger click on element
  5. Show overlaying element again
$('#elementontop').click(e => {
    $('#elementontop').hide();
    $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
    $('#elementontop').show();
});
2020/04/23

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');
});
2018/03/15

Source: https://stackoverflow.com/questions/3680429
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]