将"单击"和"双击"视为相同

Question

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

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

---

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

我尝试过使用此堆栈溢出答案，但单击它两次仍然会导致多个 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!:)');
}

工作堆栈闪电战示例