Angular 4 dblclick event not working in mobile view

Question

I'm using double click functionality in my code. It's working fine in desktop view but the problem is that when I switch to mobile/tablet view double tap doesn't work.

Here's my code sample

HTML:

<a (dblclick)="viewRecord(item.id)">View Record Details</a>

Component:

viewRecord(id) {
  this.router.navigate(['course/view/', id]);
}

Any suggestions on how to resolve this problem will be highly appreciated

Answer 1

That is because, there is no dblclick event registered for mobile devices.

But there is a work around for this. It is kind of a hack. Reference

Instead of listening dblclick you can listen for normal click event

<a (click)="viewRecord(item.id)">View Record Details</a>

component file

private  touchTime = 0;

viewRecord(id) {

    if (this.touchtime == 0) {
        // set first click
        this.touchtime = new Date().getTime();
    } else {
        // compare first click to this click and see if they occurred within double click threshold
        if (((new Date().getTime()) - this.touchtime) < 800) {
            // double click occurred
             this.router.navigate(['course/view/', id]); 
            this.touchtime = 0;
        } else {
            // not a double click so set as a new first click
            this.touchtime = new Date().getTime();
        }
    }
  }

DEMO