How to avoid double click on different button?

Question

My problem is not a double click on same button but on 2 buttons.

User make a double click on a button.

• The first click is detected by a first button

Answer 1

This is usually solved using good old human-computer interaction. Try using a style of button that visually reacts to hover, mousedown and mouseup events. This is usually enough to the user understand that a double click is not necessary. Stackoverflow itself has an awesome example:

Iddle button:

Hover button:

Mousedown button:

Mouseup button:

But if you really wish to prevent undesired clicks, maybe the best approach would be to disable buttons during actions and when you are about to re-enable then, put this action in a timeout, so the disabled buttons will last a little longer.

Another suggestion

You could implement a global function to spawn an invisible div covering the whole screen when required. This would prevent everything onscreen from working.

Put it in your layout file, usually app.component.html, and implement a *ngIf for it show up only when necessary. Also, its z-index should be greater than the z-index of any other element in your whole app.