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

Question

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

这是我的代码示例

HTML：

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

成分：

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

任何有关如何解决此问题的建议将不胜感激

Answer 1

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

但是有一个解决方法。这有点像黑客。参考

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();
        }
    }
  }

演示