Question

我创建了对话框窗口;并且我希望每当用户点击对话框窗口按钮（超链接）以外的任何地方时关闭它们。

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

很快，我需要一个针对这种情况的解决方案，除非单击对话窗口按钮，否则每当用户执行任何操作时我都会关闭对话框窗口。

我希望它很清楚;谢谢。

Answer 1

这是由event bubbling引起的。令人遗憾的是，有两个人对@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来实现这一点的原因，因为点击可能来自其中一个孩子（例如你的OK，取消按钮）。

工作DEMO
没有jQuery DEMO

我已经将函数包装在一个模块模式中，使它成为一个更整洁的组件，虽然我在第一个例子中使用了jQuery（我怀疑你不是），但这个技术早于jQuery。

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

Answer 2

这是一个非常基本的演示。我们在屏幕上有一个黄色div代表您的对话框。如果您点击div中的任意位置，那么它仍然可见，您可以使用更多HTML和事件处理程序填充此div以执行此操作。点击div以外的任何地方，div将被隐藏。注意：我不会清理你想要做的任何事件处理程序。

请参阅answer cirrus，在那里他实际上解释了event propagation以及您在解决方案中需要它的原因，我在这里没有做过。他还为您提供了使用vanilla javascript和jquery的解决方案，但我没有。他还演示了我没有的javascript module pattern。如果没有他的建设性批评和学费，我就无法给你这个答案，这促使我回到这里并改进我最初的糟糕，时间有限的答案。祝你好运。

<强> 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>

<强>的JavaScript

function dontBubble(evt) {
    evt.stopPropagation();
}

function hideBox(evt) {
    box.hidden = true;
}

function messgage() {
    document.getElementById("message").textContent = "I'm ignoring you";
}

document.getElementById("box").addEventListener("click", dontBubble, false);
document.getElementById("button1").addEventListener("click", messgage, false);
document.getElementById("button2").addEventListener("click", hideBox, false)
document.addEventListener("click", hideBox, false)

在jsfiddle

上

Answer 3

最好将click事件绑定到$（“body”），检查用户点击的位置，如果用户没有单击对话框，则可以取消绑定事件并关闭对话框。

鼠标单击时隐藏div

3 个答案: