DOM 事件详细信息不会在 Angular Click 事件中增加答案

【问题标题】：DOM Event Detail Doesn't Increment on Angular Click EventDOM 事件详细信息不会在 Angular Click 事件中增加
【发布时间】：2019-07-23 06:23:35
【问题描述】：

我正在尝试在 Angular 7 中捕获三次单击/触摸事件。

在模板中：

<img id="logoImage" src="/assets/logo.png" (click)="clickLogo($event)">

在组件中：

clickLogo(event) {
  console.log(event.detail);
  if (event.detail === 3) {
    console.log('Logo Triple Click!');
  }
}

如果我点击一次，event.detail 是 1。如果我快速点击 2 或 3 次，每个 event.detail 时间仍然是 1。

我正在尝试在此处实施第一个答案中显示的解决方案：How do I listen for triple clicks in JavaScript?

有没有办法在 Angular 中完成这项工作？我也很想知道为什么它不能以这种方式工作。

【问题讨论】：

您是否在 Safari 中测试该应用程序？以前我也是faced the issue。
在 Chrome 中测试。
就我而言，detail 属性在 Chrome 中运行良好。但无论如何，我最终还是使用了自我点击计数，因为 detail 在我的移动 Safari 中不起作用。

标签： javascript angular

【解决方案1】：

你可以试试这样的：

let clickCount = 0;
let timeout;

clickLogo(event) {
  clickCount++;

  timeout = setTimeout(() => {
    clickCount = 0;
  }, 400);

  if (clickCount === 3) {
    console.log('Logo Triple Click!');
  } else {
    clearTimeout(timeout);
  }

}

这将为您提供 400 毫秒的三次点击并使 clickCount 为 3，如果您未在 400 毫秒内完成，则 clickCount 将重置为 0；

【讨论】：

我在这里实现了这个：stackblitz.com/edit/angular-eyguni 它可以工作，但是 setTimeout 似乎直到有 3 次点击才清除 clickCount。我真的不明白为什么。
因此，在设置超时之前将 clickCount 检查交换为使此方法有效。如果 click count check if 语句在 setTimeout 之后，则由于某种原因，仅在 3 次点击后才设置超时。我在之前的评论中更新了我的演示。

【解决方案2】：

使用rxjs fromEvent 处理流的角度事件以找到三次点击

 fromEvent(this.ref.nativeElement, 'click')
  .pipe(
    buffer(fromEvent(this.ref.nativeElement, 'click').pipe(throttleTime(400))),
    // if array is greater than 2, triple click occured
    filter(clickArray => clickArray.length > 2)
  ).subscribe(v => {
    console.log(v);
  })

参考：learnrxjs.io/operators/transformation/buffer.htmlxample:https://stackblitz.com/edit/angular-button-details

【讨论】：

你代码中的console.log会记录你每次点击的时候，而不仅仅是点击3次的时候。更糟糕的是，如果您单击得足够快，它会跳过一些日志。我认为他只想在三次点击时“做事”。
我们可以使用过滤运算符来过滤更新答案的事件
你还有一个问题。如果您使用这种方法，那么两次点击之间的间隔有多长并不重要。每 3 次点击都会生成控制台日志，即使您在每次点击之间留出 1 小时（例如）
我已经更新了@Wolfyr 的答案，感谢您指出我的错误！
值得注意的是，这里的例子：learnrxjs.io/operators/transformation/buffer.html 需要点击三下才能激活。这就像第一次或最后一次点击会激活双击检测。