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

Question

问题总结

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

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

当任何事件 click, touch, etc 注册时，我使用字典 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;
}

Answer 1

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 方法 returns 指定坐标（相对于视口）的最顶层元素 并且我为每个 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;
}

额外的 - 平移似乎没有在手指开始的地方拾起，因此需要额外的 (touchstart)="logTouchstart(i)"。

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

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

How to register touch move over events in Angular?

angular

touch

hammer.js