如何使用typescript处理同一个html DOM元素上的"单击"和"双击":Angular 2或4？

Question

我的问题是,当我执行"双击"时,用于这两个事件的方法都会被触发

例如,我需要在触发特定事件时执行特定功能.

<a (click)="method1()" (dblclick)="method2()">

这两个method1()和method2()我进行"双击"越来越触发.

Answer 1

您可以使用超时和布尔标志来解决此问题.考虑以下:

DOM需要几毫秒来识别双击.

但它确定它识别双击,但第一次点击也被识别.

所以逻辑是这样的.

isSingleClick: Boolean = true;     

method1CallForClick(){
   this.isSingleClick = true;
        settimeout(()=>{
            if(this.isSingleClick){
                 doTheStuffHere();
            }
         },250)
}
method2CallForDblClick(){
         this.isSingleClick = false;
         doTheStuffDblClickHere();
}

在元素的click事件中,在元素和方法2的click事件中调用方法一.

Answer 2

这更干净

我找到了 rxjs 的解决方案，试试这个

我的模板有

<div #divElement></div>

我的 component.ts 中有

  @ViewChild('divElement') el: ElementRef;

  ngAfterViewInit(): void {
    this.handleClickAndDoubleClick();
  }

  handleClickAndDoubleClick(){
    const el = this.el.nativeElement;
    const clickEvent = fromEvent<MouseEvent>(el, 'click');
    const dblClickEvent = fromEvent<MouseEvent>(el, 'dblclick');
    const eventsMerged = merge(clickEvent, dblClickEvent).pipe(debounceTime(300));
    eventsMerged.subscribe(
      (event) => {
        if(event.type === 'click'){
          //click
        }

        //dblclick
      }
    );

Answer 3

你可以在纯JavaScript回电dblclick，或者你在角2使用方法：(dblclick)="doubleClickFunction()"。

如果您在同一元素上同时具有（click）和（dblclick），则应在click事件回调中添加超时，以避免在用户双击时调用该超时。

尝试类似：

.html：

<button (click)="singleClick()" (dblclick)="doubleClick()">click</button>

.js：

singleClick(): void{
    this.timer = 0;
    this.preventSimpleClick = false;
    let delay = 200;

    this.timer = setTimeout(() => {
      if(!this.preventSimpleClick){
        ...
      }
    }, delay);

  }

  doubleClick(): void{
    this.preventSimpleClick = true;
    clearTimeout(this.timer);
    ...
  }

Answer 4

clickCount = 0;
click() {
    this.clickCount++;
    setTimeout(() => {
        if (this.clickCount === 1) {
             // single
        } else if (this.clickCount === 2) {
            // double
        }
        this.clickCount = 0;
    }, 250)
}