DOM Event Detail Doesn't Increment on Angular Click Event

Question

I'm trying to capture a triple click/touch event in Angular 7.

In the template:

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

In the component:

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

If I click once, event.detail is 1. If I click 2 or 3 times quickly, each event.detail time is still 1.

I'm trying to implement the solution shown in the first answer here: How do I listen for triple clicks in JavaScript?

Is there a way to make this work in Angular? I'd also be interested to know why it doesn't work this way.

Answer 1

You can try something like this:

let clickCount = 0;
let timeout;

clickLogo(event) {
  clickCount++;

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

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

}

This will give you 400ms to tripple click and make clickCount 3, if you do not make it in 400ms clickCount will be reset to 0;