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

Question

我有一个 div，divDialog，它包含一个简单的对话框。它开始了无形的生命，但在某个时刻我让它可见。该页面上有几个其他元素（菜单等），它们具有点击事件的事件侦听器。

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

我看了this elegant answer，但它并没有禁用外部点击，也不是跨平台的。

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

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

...这在解决方案中可能是必要的。但是我在事件侦听器、冒泡、捕获和跨平台行为方面遇到了问题（对于 IE 似乎无法解决）。

我没有在这个上使用 jquery；只是普通的 ol' javascript。

有什么建议吗？

Answer 1

您应该在窗口上方放置一个透明、固定的div。这样，屏幕上的任何点击都将是该 div 而不是其下方的元素。这通常用作模式对话框的背景覆盖。在 IE 中，您需要确保为 position:fixed 声明了一个 !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 将阻止事件冒泡。