5

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?

4

2 回答 2

10

解决方案一。CSS。设置pointer-events: none;，但这仅适用于 Firefox、Chrome 和 Safari。

解决方案二。JavaScript。http://www.vinylfox.com/forwarding-mouse-events-through-layers/

于 2012-05-25T20:32:43.100 回答
2

我不认为你可以覆盖它。基本上这就是事件的工作方式，这就是为什么您可以在屏幕中央显示一个对话框并单击它而不在该对话框下方的元素上触发相同的事件。

您可以在更高的元素上制作类似的元素，但这看起来像点击劫持，并且某些浏览器插件可能会将您的网站标记为潜在风险

这是关于这个主题的类似讨论：HTML“overlay”，它允许点击落入它后面的元素

于 2012-05-25T20:30:58.540 回答