将单击和双击视为相同

Question

无论我点击按钮一次还是两次，我都希望能够执行一次foo()。

<span> (click)="foo()" </span>

---

foo() {
    console.log("You've clicked on foo");
}

我尝试过使用这个stackoverflow answer，但单击它两次仍会导致多个console.logs。这个函数怎么只能运行一次？

注意：并不是真的在寻找三次/四次点击（仅单次/两次）

Answer 1

尝试使用setTimeout、clearTimeout并处理用户点击：

<span 
    (click)="func1()" 
    (dblclick)="func2()">
    Hello
</span>

打字稿：

timer = 0;
delay = 200;
prevent = false;

func1(){
    this.timer = setTimeout(() => {
        if (!this.prevent) {
            this.sayHello();
        } 
        this.prevent = false;
    }, this.delay);
}

func2(){
    clearTimeout(this.timer);
    this.prevent = true;
    this.sayHello();
}

sayHello(){
    console.log('Hello, world!:)');
}

The work stackblitz example