1

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

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

很快，我需要一个解决这种情况的解决方案，只要用户除了单击对话框窗口按钮之外的任何操作，我都会关闭对话框窗口。

我希望它很清楚；谢谢你。

4

3 回答 3

1

这是由事件冒泡引起的。很遗憾，有两个人对@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，请看一下，它也可能在许多其他方面帮助您。

于 2013-04-28T00:39:53.050 回答
0

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

请参阅cirrus的答案，他实际上解释了事件传播以及为什么在您的解决方案中需要它，我在这里没有做过。他还为您提供了一个使用 vanilla javascript 和jquery的解决方案，而我没有。他还演示了我没有的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>

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 上

于 2013-04-27T20:21:34.113 回答
-1

充其量，您会将单击事件绑定到 $("body")，它会检查用户单击的位置，如果用户单击的不是在对话框中，您可以取消绑定事件并关闭对话框。

于 2013-04-27T19:57:55.997 回答