(PhoneGap)：Div 覆盖不会阻止其下方的事件。答案

【问题标题】：(PhoneGap): Div overlay is not blocking events beneath it.(PhoneGap)：Div 覆盖不会阻止其下方的事件。
【发布时间】：2014-07-02 15:15:15
【问题描述】：

我正在使用 PhoneGap（使用 jQuery mobile）为 Android 创建应用程序。

我希望在单击某些按钮后会显示 div 叠加层。它毫无问题地管理它。问题是该 div 下方的所有内容都不应在单击时做出反应（根本不应访问）。不幸的是，所有事件都可以被触发，甚至可以编辑输入/文本区域字段。

这里是创建的 div 的一些 CSS 代码：

#shopBoxOuter{

    position: fixed;
    width: 100%;
    height: 100%;   
    background-color: #000;
    opacity: 0.3;
}

还有其他选择来解决这个问题吗？提前致谢

【问题讨论】：

【解决方案1】：

这可能是因为event propagation。尝试将点击事件绑定到弹出窗口，并包含event.stopPropagation()，或者如果这不起作用event.preventDefault()，则会取消该事件。

【讨论】：

感谢您的回答，但我不知道如何绑定点击函数来捕获#shopBoxOuter 的事件，因为它是动态创建的。我尝试了类似的方法（但它不起作用）：$("#units").bind("tap", function() { var outerDiv = $('<div>', {id: 'shopBoxOuter'}); //code below doesn't work outerDiv.bind("tap", function() { alert("blocked"); }); $("body").append(outerDiv); });
这应该可行，尽管我认为现在使用 $().on 而不是 .bind 是更常见的做法。我假设您确保在文档准备好后进行绑定？
是的。 $(#units).bind 正在工作，因为它在正文中创建了 outerDiv。唯一不起作用的部分是outerDiv.bind，因为如果我点击该 div 事件不会触发。 $().on 比 .bind 好？
outerDiv 的行为就像是透明的触摸，因为如果不是 outerDiv.bind 我这样做 $("body").bind("tap", function(e) { alert(e.target.id) 我会得到outerDiv下任何元素的ID。
$().on 几乎是一回事，我相信最新版本的 jQuery .bind 实际上使用 .on。唯一真正的区别是 .bind 将来可能会被删除，这可能会破坏某些东西。我使用了jsfiddle 中的代码，它似乎可以工作。您正在创建的 div 上的样式是什么？