防止雙擊導致在 HTML 表單中重復提交

Question

我的問題很簡單：我必須在一個已經有 5 年歷史的 Web 應用程序上工作，該應用程序具有繁重的表單以及頁面上隨處可見的多個按鈕和鏈接。 我們遇到了麻煩，因為我們的很多用戶都在雙擊按鈕和鏈接，結果往往是實際提交了兩次表單。

我知道大多數解決方案通常提供給要求此類問題的人，例如說“對於頁面上的任何按鈕，在第一次點擊后使其被禁用 = 真”。 有些人還建議使用dblclick事件，忽略它只有在短時間內有兩個點擊事件時才會拋出 - 這意味着一旦dblclick事件被觸發，就已經太晚了，因為已經發生了兩次點擊。 preventDefault() 方法也是如此，該方法並未解決該問題。

但是對於禁用單擊策略，我無法重構應用程序的每個頁面的代碼以將onclick處理程序放在按鈕和鏈接上。 另外，它們中的大多數已經onclick處理程序，這意味着我將無法搜索和替換或類似的東西。 而且我也不想在每個頁面加載時發出一個 jQuery 請求，這會在頁面的每個按鈕和鏈接上添加一個新的點擊事件處理程序。 這會消耗 CPU 資源並且效率不高，因為有一些按鈕會觸發彈出窗口而不是提交表單，而且這些按鈕必須可以多次點擊，還有其他類似的例子。

我正在尋找的是一種簡單而通用的方法來告訴 Web 瀏覽器“當在頁面上的任何地方雙擊時，忽略第二次單擊”。 我真的不明白為什么現在還不可能這樣做。 很可能是因為當你發現自己處於這種情況時，你已經遠離良好實踐的界限，但這不是我的錯，我有一個問題要解決。

Answer 1

我終於找到了一個很簡單的方法來解決沒人告訴我的問題（太簡單了？）。 解決方案是使用一個將占據所有窗口的不可見層，但默認情況下是禁用的。 你可以這樣聲明：

<div id="prevent_dbclick" style="z-index: 1300; border: 0 none; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; opacity: 0; position: fixed; display: none;">500</div>

現在你還需要這個 Javascript 函數：

function disableDbClick(){
    jQuery(window).click(function(){
        var prevDbDiv = jQuery("#prevent_dbclick");
        prevDbDiv.show(); 
        setTimeout(function(){
            prevDbDiv.hide();
        }, prevDbDiv.html());       
    });
}
window.onload = disableDbClick;

請注意，我使用 jQuery 進行簡化，但如果您的項目不使用 jQuery，您可以輕松地解決它。

現在只需在頁面加載后調用該函數。 它的工作方式非常簡單：每當頁面上的某處點擊時，不可見的圖層會在頁面上方停留 500 毫秒然后消失，間隔內的任何點擊事件都會擊中圖層而不是按鈕或鏈接，有效防止雙擊提交。 一旦延遲到期，人們可以自由地再次點擊任何地方。

之所以選擇 500 毫秒延遲，是因為它是 Windows 用來區分雙擊和兩次連續點擊的延遲。 我沒有在 javascript 代碼中對其進行硬編碼，因為我希望能夠通過應用程序的屬性更改它。

希望這會有所幫助。