如何处理双击网页？ [英] How to handle double-click on web pages?

问题描述

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

Examining our web logs we find a significant number of clicks are other double-clicks, or repeat-clicks (e.g. when the system is busy and has not reacted quickly enough).

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

Double-Clicking a SUBMIT button may cause a form to process twice (generally we program against this, but I'd like to avoid possibility of errors that we have not programmed against), but even double clicking a link means that the server has to process the response twice (usually the server will detect a "disconnect" on the first click and abort processing for that - but we still incur the server-time for the effort, which is compounded when the server is under heavy load).

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

Having said that, there are times when I never get a response to a click, and its only the re-click that works.

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

One action we do see is a mis-click - click on a link, realise that it was not the desired link, and then click on the correct, adjacent, link - clearly we still need to allow that.

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

How do you handle this / what do you suggest? and what is the best way to achieve this, generically, across the whole application?

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

1) We could disable the link/button after click (perhaps for a set period of time, then re-enable)

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

2) We could hide the "body" of the page - we have done this in the past, just leaving the "banner" pane (which looks the same on all pages) which gives the appearance of the next page loading (but does not play well with the BACK button in some browsers) - this also mucks up users who mis-clicked

推荐答案

您可以使用委托和数据：

$(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);
    }
});

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

This will prevent constant rebinding, so should have decent performance.

这篇关于如何处理双击网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！