Javascript 角度7单击和双击事件

我的表格行的配置如下所示

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

上面的代码片段只需单击一行即可工作。 我试图将上述代码与双重叮当联系起来

<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中实现单击和双击功能？

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

考虑以下几点：

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

路由器链接应该做什么？你不想让它在第一次点击后导航吗？@ConnorsFan routerLink目前只在一个叮当声中进行路由。所以我对“tr”上的routerLink很在行。我需要在这个“tr”上关联一个双点击选项，以在双点击/tap上路由到另一个视图，当它在第一次点击时开始导航时，

tr

元素是否仍然在那里接收第二次点击？@ConnorsFan no。是 啊这是有道理的。非常感谢。但是有没有办法在一个

tr

上导航到两条不同的路线？我所能想到的就是在

tr

单元格上添加一个按钮并激活另一个路由。您可以在

（单击）

事件处理程序中以编程方式导航。如果希望在双击时以不同方式导航，则必须延迟导航，以允许触发（或不触发）双击事件。如果在单击行时按下键（例如，

shift

，

ctrl

），也可以导航到其他目的地。