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

score 9 · Accepted Answer · answered Jun 08 '18 at 04:23

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

Thanks Amit. It can be use as a work around. But there should be a proper event handling for mobile devices on double tap. — Tauqeer H., Jun 08 '18 at 13:18
Yes, that would be the great feature. But how often do we double click in a mobile? I guess none of the time. Probably that is why they have not added `dblclick`event. — Amit Chigadani, Jun 08 '18 at 13:26
If you using browser inspect mode to test your app, make sure the device selected is not a mobile device. I was pulling my hair out for over an hour. — fanbondi, Mar 22 '23 at 14:33

score 1 · Answer 2 · answered Aug 21 '19 at 09:12

@Amit said it well

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

Here is kind of the same solution, but the RxJS way:

HTML:

<a (dblclick)="click$.next(item.id)">View Record Details</a>

Component:

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Subject } from 'rxjs';
import { buffer, debounceTime, map, filter } from 'rxjs/operators';

export class SomeComponent implements OnInit {
  click$ = new Subject<number>();
  doubleClick$ = this.click$.pipe(
    buffer(this.click$.pipe(debounceTime(250))),
    map(list => ({ length: list.length, id: list[list.length - 1] })),
    filter(item => item.length === 2),
    map(item => item.id)
  );

  ngOnInit() {
    this.doubleClick$.subscribe((id) => this.viewRecord(id));
  }

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

StackBlitz DEMO

it's still a recurring problem. the RXJS way also helps. just wanted to point that you meant (click) in your html rather than (dblclick) since it's the actual problem. am i right ? `View Record Details` — Amassuo, Jun 23 '21 at 11:02

Angular 4 dblclick event not working in mobile view

2 Answers2