angular 2-run click and double click on a anchor tag

Question

<span>
<a href="www....">
  (click)="function1()" dblclick="function2()
</a>
</span>

Need to go to the url only for double click.on single click should execute function1.Also because of <anchor tag with href, it goes to the site by default.

Answer 1

This is because angular run click event and does't encounter dblclick happens immidiatly afterwards. Seems this has to be resolved by timeout may be.

<span>
<a href="www...." (click)="function1()" (dblclick)="function2()">
  Check Event
</a>
</span>

toggle: Boolean = true;     

  function1(){
    this.toggle = true;
    setTimeout(()=>{
        if(this.toggle){
            console.log('Single click');
        }
    },250)
  }

  function2(){
    this.toggle = false;
    console.log('DBL click');
  }

Ref -

• https://css-tricks.com/snippets/javascript/bind-different-events-to-click-and-double-click/

Working Example in Angular