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?

Answer 1

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/

Answer 2

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