Angular 7单击和双击事件

Posted 2023-03-05

【中文标题】Angular 7单击和双击事件

【英文标题】：Angular 7 single click and double click events

【发布时间】：2019-07-06 18:23:15

【问题描述】：

我的表格行配置如下，

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

上面的代码 sn-p 适用于单击行。 我试图在上面的代码上关联双重叮当

<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 中我应该怎么做才能同时实现单击和双击功能？

【问题讨论】：

routerLink 应该做什么？您不希望它在第一次点击后导航？

@ConnorsFan routerLink 目前在单次叮当声上路由。所以我对'tr'上的routerLink很满意。我需要将双重Clink选项关联在此“tr”上的“tr”以在双重频道/点击 span>上的其他视图中路由

当它在第一次点击时开始导航时，tr 元素是否仍然存在以接收第二次点击？

@ConnorsFan 不。是的……有道理。谢谢你。但是有没有办法在一个 tr 上导航到两条不同的路线？我能想到的只是在tr 单元格上添加一个按钮并激活另一条路线。

您可以在(click) 事件处理程序中以编程方式导航。如果您想在双击时进行不同的导航，则必须延迟导航，以允许触发（或不触发）双击事件。如果在单击该行时按下某个键（例如shift、ctrl），您还可以导航到不同的目的地。

【参考方案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)" >