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

It would be better if you write a custom function for protractor click:

protractor.ElementFinder.prototype.waitClick = function(wait){
  browser.sleep(wait);
  this.click();
};

describe('Tests', function() {
  element.all(by.css('#testElements')).get(0).waitClick(1000)
});

Since, overriding the default click function is not recommended.

Answer 2

have you consider Using *NgIf for both the buttons **

<button *NgIf="oneActive" (click)="oneActive=false;callfunction()">one</button>
<button *NgIf="!oneActive" (click)="oneActive=true;callfunction2()">two</button>

**

Answer 3

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.

<div style="position:fixed; top:0; left:0; width:100vw; height:100vh; z-index: 10000"></div>

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.