如何防止一个模态被绘制多次

How to prevent a modal from being drawn more than once?

本文关键字：模态 绘制 一个 何防止      更新时间：2023-09-26

这比通常的问题更抽象，我知道这违背了事情的精神，但我希望我仍然可以得到一个好的回答。

问题就在这里。我们有一个用PHP编写的相当复杂的web应用程序。目的相对不重要，但简单地说:我们正在使用Comet/AJAX/JSON/JavaScript/PHP/MySQL(没有jQuery，但是，只有原生JavaScript)来呈现实时显示数据的控件。在整个应用程序中，我们使用原生JavaScript渲染弹出模式。测试页面上是否存在同名的模态，并防止创建相同的新版本，这是相当复杂的逻辑，当然，一旦创建了一个层，就会创建一个层，以防止与下面的链接交互。

问题在于，我们至少有一个模态在呈现在页面上之前可以被多次调用，因为AJAX调用需要花费时间从数据库收集数据并将其组装起来用于表示。如果用户要"双击"所述链接，他们将看到两个情态，一个在另一个之上。我已经能够渲染其中的8-10个了。与最上面的模态交互似乎被破坏了，因为用户实际上是在最下面的模态上影响可折叠的标题。一旦你开始关闭对话框并到达底部，你就可以看到你点击的地方。

所以，我的问题是:什么是最好的方法来防止这种行为?

我考虑过简单地向onClick事件添加一个函数，该函数将在第一次点击后从链接中删除onClick属性，并有一个小超时(比如500ms)。我还考虑尝试实现位测试逻辑，计数点击，实际上只有第一次点击后的事件，当模态关闭时重置。

我想知道的是，如果有人有任何想法或建议，甚至已经解决了类似的问题，并对实现我在这种情况下的目标的最佳实践有一些见解。

非常感谢。

可以在click处理程序触发后取消注册:

var element = ...,
myClickHandler = function(event) {
    // ...
    element.removeEventListener('click', myClickHandler, false);
    // ...
}
element.addEventListener('click', myClickHandler, false);

在这种情况下，我发现最简单的解决方案是最好的，但我仍然希望听到其他的反馈，如果有的话。

在这种情况下，我发现操作顺序是问题所在。我一直在等待AJAX响应来为这个模态生成主体html。我改变了顺序，而是在模态的主体内立即使用<p>Loading...</p>创建模态。然后，当AJAX完成并且我有了新的正文文本时，我只需要将它注入到模态的内容区域中，并添加一段简洁的代码，这样一来，我们就成功了。

相关文章：