Question

这比我所知道的反对事物精神的常见问题更抽象，但我希望我仍能得到很好的回应。

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

问题在于，由于AJAX调用从数据库收集数据并将其组装以进行呈现所花费的时间，因此我们至少有一个模式可以在页面呈现之前多次调用。如果用户在所述链接上“双击”，则将呈现两个模态，一个在另一个上面。我已经能够实际渲染8-10个。与最顶层模态的交互似乎被打破，因为用户实际上在最底部模态上影响可折叠标题。一旦开始关闭对话框并到达底部，您就可以看到您点击的位置。

所以，我的问题是：防止这种行为的最佳方法是什么？

我已经考虑过简单地向onClick事件添加一个函数，该函数会在第一次点击之后从链接中删除onClick属性（例如500ms）。我还考虑过尝试实现可以计算点击次数的位测试逻辑，实际上只是在第一次点击后首先发生事件，并在模态关闭时重置。

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

非常感谢你。

Answer 1

您可以在点击处理程序触发后取消注册：

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

element.addEventListener('click', myClickHandler, false);

Answer 2

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

在这种情况下，我发现操作顺序是个问题。我正在等待AJAX响应为这个模态生成body html。我改变了顺序，而是使用模态体内的<p>Loading...</p>立即创建模态。然后，当AJAX完成并且我有了我的新正文时，我只是用一点点代码将它注入模态的内容区域而Bob是你的叔叔，我们有累积奖金。

如何防止模态多次被绘制？

2 个答案: