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

This is a bit more abstract than the usual questions which I know goes against the spirit of things, but I'm hoping that I can still get a good response.

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

Here's the issue. We have a fairly complex web application that is written in PHP. The purpose is relatively unimportant, but simply put: We are using Comet / AJAX / JSON / JavaScript / PHP / MySQL (NO jQuery, however, native JavaScript only) to render controls that display data in real time. Throughout this application we are rendering popup modals using native JavaScript. It's fairly complex logic that tests for the existence of a modal with the same name on the page and prevents creating new versions of the same, and of course once created a layer is created to prevent interacting with links beneath.

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

The issue is that we have at least one modal that can be called multiple times before it is rendered on the page due to the time it takes the AJAX call to collect data from the database and assemble it for presentation. If a user were to 'double click' on said link they would be presented with two modals, one on top of the other. I've been able to actually render 8-10 of these. Interacting with the topmost modal appears to be broken because the user is actually effecting collapsible headers on the bottom-most modal. Once you start closing the dialog boxes and get to the bottom you can see where you've clicked.

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

So, my issue is this: What is the best way to prevent this behavior?

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

I've considered simply adding a function to the onClick event that would remove the onClick attribute from the link after the first click with a minor timeout (say 500ms). I've also considered trying to implement bit testing logic that would count clicks and only actually first the event after the first click and reset when the modal is closed.

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

What I'm wondering is if someone has any thoughts or suggestions or even has tackled a similar issue and has some insight on best practices to accomplish my goal in this instance.

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

Thank you very much.

非常感谢你。

2 个解决方案

#1

You can unregister the click handler once it fired:

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

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

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

#2

In this case, I found the simplest solution to be the best but I would still love to hear other feedback if'n it's out there.

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

In this case I found that the order of operations was the issue. I was awaiting the AJAX response to generate the body html for this modal. I changed the order to instead create the modal immediately using <p>Loading...</p> within the body of the modal. Then, when the AJAX was completed and I had my new body text, I just injected it into the modal's content area with a neat bit of code and Bob's your Uncle, we had jackpot.

在这种情况下，我发现操作的顺序是问题。我正在等待AJAX响应为这个模态生成body html。我改变了顺序，而是立即使用

Loading ... 在模态体内创建模态。然后，当AJAX完成并且我有了我的新正文时，我只是将它注入模态的内容区域，并且有一些整齐的代码，Bob是你的叔叔，我们有累积奖金。

#1