Doubleclicking on the Web (2015)

This is something I usually take care of by throttling the relevant event listeners (in an AJAXed site) but the way this article puts it makes me wonder if this is as easy as globally disabling double clicks on links and buttons:

    document.addEventListener('dblclick', event => {
      if (event.target.closest('a, input, button'))
        event.preventDefault()
    })

The proposed solution (an HTML attribute to 'allow' double-click submissions of s) is backwards from how the standard would be updated.

The proposal should instead be for an attribute that prevents double-clicks, because that way browsers that have not implemented it still behave correctly. Additionally, you don't "break userspace" for millions of forms online that no longer work as the developer intended.

However, I'm skeptical that we need to encode this at all into the standard, since setting the `disabled` attribute on the submission button after submission is pretty much test case #0 of any serious online form development.

Amusingly, things have gotten a lot better since 2015 when this was written. That blob of JQuery is now replaced with binding the `disabled` attribute to `isSubmitted` state on your React-based webform. An interesting glimpse into the web-that-used-to-be.

Similar problem occurs with the Windows task bar and Mac dock.

I've seen new users in particular double click to open.

Then, since the machine is so busy, nothing happens for a bit.

Concerned, the user then double clicks again. At this point they start to despair or curse.

Double clicking on the Mac dock should be idempotent.

If you want a better server-side solution, you could try employing mandatory idempotency tokens in the request payload. The concept is simple: either have the server give the client an idempotency token as part of the page load, or have the client request one at some point, or have it be something that can be generated on the client side (nonce style) and send it with the request. The server can then validate, using some strongly consistent system, that it has not received any requests in a certain window of time with that token. (Or, possibly, react with the existing response.)

This has an additional benefit that even methods like PUT do not: it works no matter how many layers of your stack might have retry behavior (properly or improperly) and enables safe retry even when you can’t be sure if the request went through or not. The primary downside is that it introduces a single point of failure, though you could theoretically shard it by some property of the request such as the session key/user id/IP address. Still desirable if you have something you really don’t want to repeat, like a transaction. (Probably would be wise to also make those multiple stage, but nonetheless.)

Goes without saying you should definitely still mitigate this on the client side by updating the UI state if JavaScript is available.