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

Question

总结问题

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

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

pressed当任何事件click, touch, etc注册并[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;
}

Answer 1

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

需要更改- 这里的关键是如果我要这样做

(pan)="logPan(i)"

在tdthen内，无论 pan 事件的日志记录与ipan 开始的位置相同。

而如果我这样做

(pan)="logPan($event)"

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

利用坐标- 要将坐标转换为我关心的坐标(x, y)，td我使用了elementFromPoint方法，该方法返回指定坐标（相对于视口）的最顶层元素，并且我id为每个坐标添加了一个可访问的属性，td以便我可以设置我的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;
}

附加- 平底锅似乎没有拿起手指第一次开始的地方，所以(touchstart)="logTouchstart(i)"需要附加。

信用- 我在查看以下博客上的 Stackblitz 后发现了这一点：https ://medium.com/angular-in-depth/gestures-in-an-angular-application-dde71804c0d0