javascript - Angular 7 单击和双击事件

Question

我的表格行配置如下，

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]" [routerLink]="['/invoices', v.userid]">

上面的代码片段适用于单击该行。 我尝试在上面的代码上关联 double clink

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]" [routerLink]="['/invoices', v.userid]"
            (dblclick)="somefunction()">

但现在，也只有单一的 clang 有效。 删除 [routerlink] 后双击有效。

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]"
            (dblclick)="somefunction()">

我应该怎么做才能在 Angular 7 中同时实现单击和双击功能？

Answer 1

在这里您可以使用超时和 bool 标志来解决这个问题。

考虑以下几点:

DOM 需要几毫秒来识别双击。

但是它识别双击但也识别第一次点击。

所以逻辑是这样的。

你的.component.ts

export class App {

  preventSingleClick = false;
  timer: any;
  delay: Number;

  singleClick(event) {
    this.preventSingleClick = false;
     const delay = 200;
      this.timer = setTimeout(() => {
        if (!this.preventSingleClick) {
           //Navigate on single click
        }
      }, delay);
  }

    doubleClick (event) {
      this.preventSingleClick = true;
      clearTimeout(this.timer);
      //Navigate on double click
    }
 }

HTML

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]"  (click)="singleClick($event)" (dblclick)="doubleClick($event)" >