Javascript 鼠标单击隐藏div

我已经创建了对话框窗口；我希望当用户单击对话框窗口按钮（超链接）以外的任何位置时，它们都被关闭

我在对话框窗口的后面创建了一个大的“覆盖”div（0不透明度）来捕捉点击，但是当用户想要在后面点击任何东西（如另一个超链接）并同时关闭对话框时，这就成了一个很大的问题。由于存在覆盖，它将被激活（以关闭对话框），并且不会捕获单击的超链接

很快，我需要一个解决方案，在这种情况下，每当用户除了单击对话框窗口按钮之外做任何事情时，我都会关闭对话框窗口

---

我希望这是清楚的；谢谢。

充其量，您可以将单击事件绑定到$（“body”），这将检查用户单击的位置，如果用户单击的位置不在对话框中，您可以解除绑定事件并关闭对话框。

这是一个非常基本的演示。屏幕上有一个黄色的

div

，代表您的对话框。如果您单击

div

中的任何位置，它将保持可见，您可以使用更多HTML和事件处理程序填充此

div

，以执行您希望的操作。单击

div

之外的任意位置，

div

将被隐藏。注意：我没有清理任何事件处理程序，这是您想要做的

请看by，他实际上在那里解释了您的解决方案中需要它的原因，而我在这里没有这样做。他还提供了一个使用香草javascript和javascript的解决方案，我没有。他还展示了我没有做到的地方。如果没有他建设性的批评和指导，我不可能给你这个答案，这促使我回到这里，改进我原来可怜的、时间有限的答案。祝你好运。

CSS

.box {
    width:300px;
    height:100px;
    position: absolute;
    top: 30%;
    left: 30%;
    background-color:yellow;
    border:2px solid;
}
#message {
    position: absolute;
    right: 50%;
    bottom: 50%;
}
#button1 {
    position: absolute;
    right: 0;
    bottom: 0;
}
#button2 {
    position: absolute;
    right: 4em;
    bottom: 0;
}

HTML

<div id="box" class="box">
    <div id="message"></div>
    <button id="button1">
        <img src="http://img856.imageshack.us/img856/3817/ticklf.png" alt />Ok</button>
    <button id="button2">
        <img src="http://img822.imageshack.us/img822/1917/crossn.png" alt />Cancel</button>
</div>

)

在

上，这是由以下原因引起的。遗憾的是，有两个人否决了@Lilith2k3的答案，因为他没有错，@Xotic750的解决方案太复杂了。您的身体上确实需要一个事件处理程序，但您只需要过滤掉对话框中的点击

您需要两个

onclick（）

处理程序。一个用于关闭对话框，另一个用于取消事件冒泡。见下文

function dlgClickHandler(e) {
    // do dialog stuff, then...
    e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); // cancel event bubbling so body click handler not activated
}

function bodyClickHandler(e) {
    // close dlg
}

这也是您不能仅通过比较对话框ID来执行此操作的原因，因为单击可能来自其中一个子项（例如，您的“确定”、“取消”按钮）

• 工作
• 没有jQuery

我将函数包装在一个模块模式中，使其成为一个更整洁的组件，尽管我在第一个示例中使用了jQuery（我想您不是），但该技术早于jQuery

---

我怀疑您没有使用jQuery的原因之一是，如果您使用jQuery，您可能已经偶然发现了许多jQuery弹出插件中的一个，用于处理这样的对话框。如果您还没有尝试过jQuery，请看一看，它可能在许多其他方面也会对您有所帮助。

您能在这里粘贴一些代码吗，尽可能多的粘贴一些代码。清理这些东西会非常困难，我相信我更愿意用文字来解释。

function dlgClickHandler(e) {
    // do dialog stuff, then...
    e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); // cancel event bubbling so body click handler not activated
}

function bodyClickHandler(e) {
    // close dlg
}