时间戳

首页 > 解决方案 > DOM 事件详细信息不会在 Angular Click 事件中增加

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

问题描述

我正在尝试在 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。

我正在尝试实现此处第一个答案中显示的解决方案：如何在 JavaScript 中侦听三次点击？

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

标签： javascriptangular

解决方案

你可以尝试这样的事情：

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；

推荐阅读