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

我有一个div，divDialog，它包含一个简单的对话框。它开始于看不见的生命，但在某一点上，我使它可见。页面上还有几个其他元素（菜单等），它们具有用于单击事件的事件侦听器

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

我读过，但它没有禁用外部点击，也没有跨平台

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

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

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

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

---

有什么建议吗？

事件。preventDefault

将阻止事件冒泡。

事件。preventDefault

将阻止事件冒泡。

您应该在窗口上方放置一个透明、固定的

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索引大于覆盖层的z索引。

您应该在窗口上放置一个透明的、固定的

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索引大于覆盖的z索引。

是的，但是如果事件起源于divDialog之外，例如，在链接或菜单中，divDialog将永远看不到它以阻止它冒泡。我知道这可能不是您想要做的，但您必须“掩盖”其他DOM元素。jQuery通过创建一个显示在对话框下面的div来实现这一点，如果它是一个模式对话框，那么它只会屏蔽用户单击其他内容，这就是您要使用的，所以伪代码。。。在对话框上显示；显示屏；显示对话框；——在对话框上隐藏；隐藏对话框；隐藏屏幕；这是有道理的。你和js1568在同一条轨道上。非常感谢！是的，但是如果事件起源于divDialog之外，例如在链接或菜单中，divDialog将永远不会看到它来阻止它冒泡。我知道这可能不是您想要做的，但是您必须“掩盖”其他DOM元素。jQuery通过创建一个显示在对话框下面的div来实现这一点，如果它是一个模式对话框，那么它只会屏蔽用户单击其他内容，这就是您要使用的，所以伪代码。。。在对话框上显示；显示屏；显示对话框；——在对话框上隐藏；隐藏对话框；隐藏屏幕；这是有道理的。你和js1568在同一条轨道上。非常感谢！将

divDialog

上的

z-index

设置为101，以定位在覆盖视图上方。我没想到。当然，divDialog需要更高的z索引，对吗？那么就不会有听众参与了，是吗？：），就在你评论z-index的时候发布。谢谢，好的。我试过了。这里有两件事是必须的（为了其他读者的利益）是：（1）你必须有一个！IE浏览器中的DOCTYPE位置：固定为工作状态；（2）如果覆盖不是页面上的第一件事，样式需要“top:0；left:0；”添加到其中。我仍然有困难。即使覆盖层存在（我更改了背景色以确保），也会有一些点击通过它，即使z-index:1000。将

divDialog

上的

z-index

设置为101，以定位在覆盖层上方。我没想到。当然，divDialog需要更高的z索引，对吗？那么就不会有听众参与了，是吗？：），就在你评论z-index的时候发布。谢谢，好的。我试过了。这里有两件事是必须的（为了其他读者的利益）是：（1）你必须有一个！IE浏览器中的DOCTYPE位置：固定为工作状态；（2）如果覆盖不是页面上的第一件事，样式需要“top:0；left:0；”添加到其中。我仍然有困难。即使存在覆盖层（我更改了背景颜色以确保），也会有一些点击通过它，即使z-index:1000。