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

总结一下问题

堆栈闪电战 -https://stackblitz.com/edit/angular-touch-playground https://stackblitz.com/edit/angular-touch-playground

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

我用过字典pressed当任何事件click, touch, etc寄存器和[class.bg-warning]="pressed[i]"来突出这些。

有没有办法分别注册td感动？

我尝试过类似的事件click, touchstart and 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;
}

斯塔克闪电战 - https://stackblitz.com/edit/angular-touch-playground-pan-events https://stackblitz.com/edit/angular-touch-playground-pan-events

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

(pan)="logPan(i)"

内td那么无论 pan 事件都会记录相同的i作为平底锅开始的地方。

而如果我这样做

(pan)="logPan($event)"

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

使用坐标- 转换坐标(x, y) to the td我关心我用过的元素从点 https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/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)"是必须的。

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