javascript - DOM 事件详细信息不会在 Angular Click 事件上增加

Question

我正在尝试在 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 中工作？我也有兴趣知道为什么它不能这样工作。

Answer 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；