All geek questions in one place

How to double-click on web pages?

Studying our weblogs, we find that a significant number of clicks are other double clicks or repeated clicks (for example, when the system is busy and does not respond fast enough).

Double-clicking the SUBMIT button may cause the form to be processed twice (as a rule, we program against it, but I would like to avoid the possibility of errors that we did not program), but even double-clicking on the link means that the server must process the response twice (usually the server will detect "disconnect" on the first click and interrupt processing for this - but we still bear the server time for efforts, which is aggravated when the server is under heavy load).

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

One action that we see is right-clicking on the link, realizing that it was not the desired link, and then clicking on the correct, adjacent link - obviously, we still need to allow this.

How do you deal with this / what do you offer? and what is the best way to achieve this, in general, throughout the application?

1) We could disable the link / button after the click (possibly for a given period of time, then turn it back on)

2) We could hide the "body" of the page - we did this in the past by simply leaving the banner panel (which looks the same on all pages), which gives the appearance of the next page load (but does not work very well with the BACK button in some browsers ) - this also misleads users who clicked incorrectly

+4
source share
5 answers

You can do this with a combination of delegate and 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); } });

This will prevent permanent re-binding, so it should have decent performance.

+4
source

You can set a custom attribute after clicking an element, and then check it: if it exists, ignore the click.

This will not change the user interface of the element, just ignore repeated clicks.

Unprocessed example of using pure JavaScript (since you did not mark your question using jQuery): http://jsfiddle.net/248g8/

+2
source

If this bothers you very much (and if the obvious answer “make sure your server always responds very quickly” is not possible ;-) I would suggest that a modified version of your (2) is the way forward.

The critical thing here is to give the user sufficient feedback that they feel that something is happening - ideally, without blocking the possibility of the user re-clicking in the few cases when something really went wrong.

Using javascript to create a little swirly “download ...” can be effective here - and it’s easy to set this up so that browsers that don’t support javascript (or disable it) return to the standard link behavior. Although I would only do this for forms where there is a long wait (or where it can frighten the user) - this will make the site rather distracting to use, and in any case (a) users will use links from time to time slow on the Internet, and (b) your server must be powerful enough to handle the occasional extra punch :-)

You can disable the link or submit button, but this disappoints the user in case the submission fails for some reason (my bank does this, and TBH scares me that they don’t understand that they should instead have a “round program” problem with double sending as you described it!).

Of course, I would not turn off the link, and then turn it back on after a timeout - this would be very confusing for the user ...

+1
source

If you use jQuery, perhaps you can listen for double clicks on the <BODY> , and then prevent the spread.

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

I would say either:

  • Just leave it. While you're programming against double views of forms, who cares about a few additional processes?

  • Disable the link in a few seconds, as you said. That was my first thought before I got to this part of your question. With jQuery (change for your library):

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

Source: https://habr.com/ru/post/1333164/

More articles:


All Articles