Question

检查我们的网络日志，我们发现大量点击是其他双击或重复点击（例如，当系统繁忙且反应不够快时）。

双击SUBMIT按钮可能会导致表单处理两次（通常我们针对此进行编程，但我希望避免出现我们没有编程的错误），但即使双击链接也意味着服务器必须处理响应两次（通常服务器将在第一次单击时检测到“断开连接”并中止处理 - 但我们仍然需要服务器时间来完成工作，这在服务器负载很重时会加剧）

话虽如此，有时候我从来没有得到过点击的响应，只有重新点击才有效。

我们看到的一个操作是误点击 - 点击链接，意识到它不是所需的链接，然后点击正确的，相邻的链接 - 显然我们仍然需要允许。

你如何处理这个/你的建议是什么？通常，在整个应用程序中实现这一目标的最佳方法是什么？

1）我们可以在点击后禁用链接/按钮（可能是一段时间，然后重新启用）

2）我们可以隐藏页面的“正文” - 我们过去已经这样做了，只留下“横幅”窗格（在所有页面上看起来都一样），这样可以显示下一页加载的外观（但是在某些浏览器中使用“返回”按钮效果不佳 - 这也会误导错误点击的用户

Answer 1

您可以结合使用delegate和data：

来完成此操作

$(document).delegate('a, :button', 'click', function(e) {
    var lastClicked = $.data(this, 'lastClicked'),
        now = new Date().getTime();

    if (lastClicked && (now - lastClicked < 1000)) {
        e.preventDefault();
    } else {
        $.data(this, 'lastClicked', now);
    }
});

这样可以防止不断重新绑定，所以应该有不错的表现。

Answer 2

单击该元素后，您可以设置自定义属性，然后检查该属性：如果存在，则忽略该单击。

这不会改变元素的UI，只是忽略重复点击。

使用纯JavaScript的粗略示例（因为您未使用jQuery标记问题）可在此处获取：http://jsfiddle.net/248g8/

Answer 3

如果这对您来说是一个很大的问题（并且如果明确回答“确保您的服务器总是快速响应”是不可能的;-)我建议您修改版本（2）是前进之路

这里的关键是给用户足够的反馈，他们感觉发生了什么事情 - 理想情况下，在没有阻止用户真正出错的少数情况下再次点击的可能性

使用javascript制作一个小的swirly“loading ...”图形在这里可能会有效 - 并且很容易设置它，以便不支持javascript（或禁用它）的浏览器回退到标准链接行为。虽然我只会对需要花费很长时间（或者可能会吓到用户）的表单执行此操作 - 但这会使网站使用起来分散注意力，并且无论如何（a）用户习惯于链接偶尔在互联网上慢，（b）你的服务器应该足够强大，以应付偶尔的额外打击： - ）

你可以禁用链接或提交按钮 - 但是如果由于某种原因提交失败，用户会感到很沮丧（我的银行会这样做，TBH让我害怕他们不知道没有意识到他们应该像你描述的那样“编程”双重提交问题！）。

我当然不会禁用该链接，然后在超时后重新启用它 - 这对用户来说会非常混乱......

Answer 4

如果你正在使用jQuery，那么也许你可以在<BODY>标签上听取双击，然后阻止传播。

$("body").live('dblClick',function()
{
    return false;
});

Answer 5

我会说：

离开吧。只要您编写了针对表单的双重提交的程序，谁会关心一些额外的流程？

按照您的建议，停用链接几秒钟。在我谈到你的问题之前，这是我的第一个想法。使用jQuery（改为您选择的库）：

$('a').live('click',function()
{
    var returnFalse = function () { return false; };
    $(this).click(returnFalse);
    window.setTimeout(function () { $(this).unbind('click',returnFalse) }, 3000);
}

如何处理双击网页？

5 个答案: