如何在Angular中注册触摸移动事件？

Question

如何在Angular中注册触摸移动事件？

angulartouchhammer.js

6

问题概述

Stackblitz - https://stackblitz.com/edit/angular-touch-playground

我正在尝试注册触摸事件，并希望能够触摸手指，拖动并抬起手指，从而使表格的每个 td 都被突出显示。这似乎被记录为一个 pan 事件。

当任何事件 click、touch 等 注册时，我使用了一个词典 pressed，并使用 [class.bg-warning]="pressed[i]" 来突出显示这些内容。

有没有一种方法可以注册每个被触摸的 td？

我尝试了像 click、touchstart 和 hammerjs 事件（在 app.module.ts 中通过 import 'hammerjs'; 导入），但我必须单击每个 td 才能将其突出显示。

<td *ngFor="let dummy of ' '.repeat(48).split(''), let i = index"
    (press)="logPress(i)"
    (mouseenter)="logMouseIn(i)"
    (touchmove)="logTouchmove(i)"
    (click)="logClick(i)"
    (touch)="logTouch(i)"
    (touchend)="logTouchend(i)"
    (hover)="logHover(i)"
    (touchstart)="logTouchstart(i)"
    (touchend)="logTouchend(i)"
    (touchcancel)="logTouchcancel(i)"
    [class.bg-warning]="pressed[i]" >
</td>

设置pressed字典的示例：

logClick(i: number) {
 this.event += '\n Click: '+ i.toString();
 this.pressed[i]=1;
}

- Andrew Allen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Allen · Accepted Answer

Stackblitz - https://stackblitz.com/edit/angular-touch-playground-pan-events

需要更改 - 关键在于如果我要执行此操作

(pan)="logPan(i)"

如果在 td 内部进行拖动，则无论何时进行拖动事件，都会记录相同的 i 作为拖动开始的位置。

而如果我这样做：

(pan)="logPan($event)"

我可以通过evt.center.x / evt.center.y访问$event坐标(x, y)。

利用坐标 - 为了将坐标(x, y)转换为我关心的td，我使用了elementFromPoint方法，该方法返回指定坐标（相对于视口）上最上层的元素，并且我为每个td添加了可访问属性id，以便我可以设置我的pressed字典，记录触摸到的td。

logPan(evt: any) {
  this.event += '\n Touch Pan: '+ `(${evt.center.x}, ${evt.center.y}, ${document.elementFromPoint(evt.center.x, evt.center.y).id})`
  this.pressed[document.elementFromPoint(evt.center.x, evt.center.y).id]=1;
}

补充说明 - 滑动开始的位置似乎无法被pan事件监听到，因此需要添加(touchstart)="logTouchstart(i)"来解决该问题。

来源致谢 - 我在参考以下博客的Stackblitz代码后，才发现了这一问题：https://medium.com/angular-in-depth/gestures-in-an-angular-application-dde71804c0d0