如何在Angular中注册触摸移动事件? [英] How to register touch move over events in Angular?

问题描述

总结问题

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

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

我正在尝试注册触摸事件，并且希望能够触摸我的手指，拖动并抬起手指，从而导致桌子上的每个td都被突出显示.这似乎被记录为pan事件

I'm trying register touch events and want to be able to touch my finger, drag and lift my finger resulting in every td of a table touched to be highlighted. This seems to be recorded as a pan event

当任何事件click, touch, etc注册并且[class.bg-warning]="pressed[i]"突出显示这些事件时，我都使用字典pressed.

I've used a dictionary pressed when any of the events click, touch, etc registers and [class.bg-warning]="pressed[i]" to highlight these.

有没有一种方法可以记录每个被触摸的td?

Is there a way to register each td touched?

我尝试了像click, touchstart这样的事件 和hammerjs事件(在我已经通过import 'hammerjs';导入的app.module.ts中)，但是我必须单击每个td以突出显示它.

I've tried events like click, touchstart and hammerjs events (in app.module.ts I've imported via import 'hammerjs';) but I have to click every td to highlight it.

<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词典的示例:

example of setting pressed dictionary:

logClick(i: number) {
 this.event += '\n Click: '+ i.toString();
 this.pressed[i]=1;
}

推荐答案

Stackblitz - 需要更改-这里的关键是我要这么做

Change required - The key here is that if I were to do

(pan)="logPan(i)"

在td内，则无论pan事件是否会记录与pan开始的位置相同的i.

within the td then no matter the pan event would log the same i as the where the pan started.

如果我这样做

(pan)="logPan($event)"

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

使用坐标-要将坐标(x, y)转换为td，我在乎我使用了

Utilizing coordinates - To convert the coordinates (x, y) to the td I care about I've used the elementFromPoint method which returns the topmost Element at the specified coordinates (relative to the viewport) and I've added an accessible attribute id to each td so that I can set my pressed dictionary, which is logging the td touched.

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)".

Additional - pan doesn't seem to pick up where the finger first starts so an addtional (touchstart)="logTouchstart(i)" is required.

信用-在查看以下博客上的Stackblitz之后，我发现了这一点:

Credit - I figured this out after looking at the Stackblitz on the following blog: https://medium.com/angular-in-depth/gestures-in-an-angular-application-dde71804c0d0

这篇关于如何在Angular中注册触摸移动事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！