如何在元素可见时禁用外部点击？

Question

我有一个div，divDialog，它包含一个简单的对话框。它开始是隐形的，但在某一点上我让它可见。该页面上有几个其他元素（菜单等），它们具有click事件的事件监听器。

我的问题是，一旦divDialog可见，如何禁用除divDialog之外的所有点击事件？当然，一旦divDialog再次隐形，我想让所有听众恢复正常行为。

我看过this elegant answer，但它不会禁用外部点击，也不会跨平台。

我确实有一个例程来检测节点是否是另一个节点的祖先：

function isAncestorOf(ancestor, descendant) {...}

......这在解决方案中可能是必要的。但是我遇到了事件监听器，冒泡，捕获和跨平台行为的麻烦（似乎无法弄清楚IE）。

我没有在这个上使用jquery;只是常规的'javascript。

有什么建议吗？

Answer 1

您应该在窗口上放置一个透明的，固定的div。这样，屏幕上的任何点击都将是div而不是它下面的元素。这通常用作模态对话框的背景叠加。在IE中，你需要确保为位置声明了一个！DOCTYPE：固定为工作。

div#overlay {
   position:fixed;
   top:0;
   left:0;
   height:100%;
   width:100%;
   z-index:100;
   background-color:#444444;
   opacity:0.5;
   filter:alpha(opacity=50);
}

你需要确保divDialog的z-index大于覆盖的z-index。

Answer 2

event.preventDefault会阻止事件冒泡。