如何防止模態多次被繪制？

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是你的叔叔，我們有累積獎金。