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()">

但现在也只有单个叮当声有效。删除[routerlink]后，双击有效。

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

我应该在Angular 7中同时实现单击和双击功能吗？

Answer 1

在这里您可以使用超时和布尔值标志来解决此问题。

请考虑以下内容：

DOM需要几毫秒的时间才能识别出双击。

但是它可以识别双击，但也可以识别第一次单击。

所以逻辑是这样的。

your.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)" >

Angular 7单击事件和双击事件

1 个答案: