Question

我在代码中使用了双击功能。它在桌面视图中工作正常，但问题是，当我切换到移动/平板电脑视图时，双击无法正常工作。

这是我的代码示例

HTML：

 var wfap = new WaitForActionProcess(
       h => mainView.OnViewShown += h, 
       h => mainView.OnViewShown -= h);

组件：

<a (dblclick)="viewRecord(item.id)">View Record Details</a>

有关如何解决此问题的任何建议都将受到高度赞赏

Answer 1

这是因为，没有为移动设备注册dblclick个事件。

但是有一个解决方法。这是一种黑客攻击。 Reference

您可以倾听正常dblclick事件

，而不是倾听click

<a (click)="viewRecord(item.id)">View Record Details</a>

组件文件

private  touchTime = 0;

viewRecord(id) {

    if (this.touchtime == 0) {
        // set first click
        this.touchtime = new Date().getTime();
    } else {
        // compare first click to this click and see if they occurred within double click threshold
        if (((new Date().getTime()) - this.touchtime) < 800) {
            // double click occurred
             this.router.navigate(['course/view/', id]); 
            this.touchtime = 0;
        } else {
            // not a double click so set as a new first click
            this.touchtime = new Date().getTime();
        }
    }
  }

DEMO

Answer 2

@Amit说得很好

这是因为，没有为移动设备注册dblclick事件。

这里是相同的解决方案，但是 RxJS 方式：

HTML：

<a (dblclick)="click$.next(item.id)">View Record Details</a>

组件：

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Subject } from 'rxjs';
import { buffer, debounceTime, map, filter } from 'rxjs/operators';

export class SomeComponent implements OnInit {
  click$ = new Subject<number>();
  doubleClick$ = this.click$.pipe(
    buffer(this.click$.pipe(debounceTime(250))),
    map(list => ({ length: list.length, id: list[list.length - 1] })),
    filter(item => item.length === 2),
    map(item => item.id)
  );

  ngOnInit() {
    this.doubleClick$.subscribe((id) => this.viewRecord(id));
  }

  viewRecord(id) {
    this.router.navigate(['course/view/', id]);
  }
}

StackBlitz DEMO

Angular 4 dblclick事件在移动视图中不起作用

2 个答案: