Absolutely Positioned DIV with a High Z-Index Is Blocking Click Events Below it

Question

Here is what I am trying to do:

Create a global "gesture container" that is absolutely positioned, width and height 100%, and a z-index that is higher than all other elements in the document.

Here is my problem: When I create this container, my absolutely positioned element is blocking the click events that are bound to everything that is below it.

$(document).ready(function() {
    $(document).on('click touchstart', '.block', function() {
        var $this = $(this);

        if(!$this.hasClass("disabled")){
            $this.addClass("disabled")
            $this.openPopUp();
        }
        return false;           
    });
});

Notice I am using the new .on() call from jQuery 1.7.2 which I have set up to function the same way as .live().

Why is my element not accepting my click? Looks like my gesture area is blocking it, but is there a way around that?

score 10 · Accepted Answer · answered May 25 '12 at 20:32

10

Solution one. CSS. Set pointer-events: none;, but this only works for Firefox, Chrome and Safari.

Solution two. JavaScript. http://www.vinylfox.com/forwarding-mouse-events-through-layers/

answered May 25 '12 at 20:32

Ana

35,599
6
80
131

You rock! Holy crap that link was awesome! I didn't even know this was a thing until now! Thank you! – Alex May 25 '12 at 20:52

score 2 · Answer 2 · edited May 23 '17 at 12:22

I don't think you can override that. Basically that is how events works, that is why you can show a dialog box on the centre of the screen and click in it without firing the same events on elements below that dialog box.

You can make similar elements on that higher elements but this would be looking like click-jacking and some browser addons may mark your site as a potential risk

Here is similar discussion on this topic: HTML "overlay" which allows clicks to fall through to elements behind it

Absolutely Positioned DIV with a High Z-Index Is Blocking Click Events Below it

2 Answers2