具有高Z-Index的绝对定位DIV正在阻止单击其下方的事件

时间:2012-05-25 20:22:35

标签: jquery css events click z-index

以下是我要做的事情:

创建绝对定位的全局“手势容器”,宽度和高度100%,以及高于文档中所有其他元素的z索引。

这是我的问题: 当我创建这个容器时,我绝对定位的元素会阻止绑定到它下面所有内容的点击事件。

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

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

注意我正在使用jQuery 1.7.2中新的.on()调用,我将其设置为与.live()一样的功能。

为什么我的元素不接受我的点击?看起来我的手势区域正在阻挡它,但有没有办法绕过它?

2 个答案:

答案 0 :(得分:10)

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

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

答案 1 :(得分:2)

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

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

以下是关于此主题的类似讨论:HTML "overlay" which allows clicks to fall through to elements behind it