Событие Angular 4 dblclick не работает в мобильном представлении

Question

Я использую функциональность двойного щелчка в моем коде.В настольном представлении он работает нормально, но проблема в том, что при переключении в режим просмотра с мобильного телефона / планшета двойной щелчок не работает.

Вот мой пример кода

HTML:

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

Компонент:

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

Любые предложения о том, как решить эту проблему, будут высоко оценены

Answer 1

@ Амит сказал, что хорошо

Это потому, что для мобильных устройств не зарегистрировано событие dblclick.

Вот то же решение, но RxJS путь:

HTML:

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

Компонент:

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

Answer 2

Это связано с тем, что для мобильных устройств не зарегистрировано событие dblclick.

Но для этого есть обходной путь.Это своего рода хак. Ссылка

Вместо прослушивания dblclick вы можете прослушивать обычное click событие

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

файл компонента

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