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事件是否会记录与pan开始的位置相同的i。

如果我这样做

(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://blog.angularindepth.com/gestures-in-an-angular-application-dde71804c0d0

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

1 个答案: