javascript - Angular 4 dblclick event not working in mobile view - Stack Overflow

admin管理员组

文章数量:1287622

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

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

• javascript
• angular

Share Improve this question Follow edited Jun 8, 2018 at 4:06 Tauqeer H. asked Jun 8, 2018 at 2:36 Tauqeer H.Tauqeer H. 80122 gold badges1010 silver badges2020 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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>

ponent file

private  touchTime = 0;

viewRecord(id) {

    if (this.touchtime == 0) {
        // set first click
        this.touchtime = new Date().getTime();
    } else {
        // pare 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

@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

本文标签： javascriptAngular 4 dblclick event not working in mobile viewStack Overflow