angular - 如何在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)"

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

而如果我这样做

(pan)="logPan($event)"

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

使用坐标 - 转换坐标 (x, y)到 td我关心我用过 elementFromPoint返回指定坐标(相对于视口(viewport))的最顶层元素的方法，我添加了一个可访问属性 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;
}

附加 - pan 似乎没有拾起手指第一次开始的位置，所以额外的 (touchstart)="logTouchstart(i)"是必须的。

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