Question

我的问题很简单：我已经开始使用已有5年历史的Web应用程序，其中包含重型表单和多个按钮以及页面上的链接。我们遇到了麻烦，因为很多用户双击按钮和链接，通常以表格的实际双重提交结束。

我知道通常会向人们提出解决此类问题的大多数解决方案，例如对页面上的任何按钮说＆＃34; ，使其在第一次点击后被禁用= true ＆＃ 34 ;.有些人还建议使用dblclick事件，忽略仅在短时间内发生两次点击事件时抛出事件 - 这意味着一旦dblclick事件被触发，已经为时已晚因为已经发生了两次点击。与preventDefault（）方法相同，该方法没有解决问题。

但是对于禁用点击策略，我只能重构应用程序的每个页面的代码，以便将onclick处理程序放在按钮和链接上。此外，他们中的大多数已经附加了onclick个处理程序，这意味着我无法搜索和替换此类内容。而且我也不想在每个页面加载上发出一个jQuery请求，这会在页面的每个按钮和链接上添加一个新的单击事件处理程序。这会花费CPU资源并且无论如何都不高效，因为有些按钮会触发弹出窗口而不是提交表单，而且这些按钮必须可以多次点击，还有其他类似的例子。

我正在寻找的是一种简单而通用的方式来告诉Web浏览器＆＃34;当双击页面上的任何地方时，忽略第二次点击＆＃34;。我真的不明白为什么不可能这样做。很可能是因为当你发现自己处于这种情况时，你已经远离了良好实践的界限，但这不是我的错，我有一个问题需要解决。

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代码中硬编码，因为我希望能够通过应用程序的属性更改它。

希望这会有所帮助。

防止双击导致HTML表单中的双重提交

1 个答案: