How to handle "single click" and "double click" on the same html DOM element using typescript:Angular 2 or 4?

Question

My issue is, the methods used for both the events is getting triggered when I perform "double click"

For example, I need to perform specific functionality when specific event is triggered.

<a (click)="method1()" (dblclick)="method2()"> 

Both method1() and method2() are getting triggered when I perform "double click".

Answer 1

You can use a timeout and a boolean flag to solve this. Consider the following:

The DOM takes a few milliseconds to recognize the double click.

But it's damn sure that it recognize the double click but the first click is also recognized.

So the logic goes like this.

isSingleClick: Boolean = true;       method1CallForClick(){    this.isSingleClick = true;         setTimeout(()=>{             if(this.isSingleClick){                  doTheStuffHere();             }          },250) } method2CallForDblClick(){          this.isSingleClick = false;          doTheStuffDblClickHere(); } 

Call the method one in the click event of the element and method 2 in the click event of the element.