如何在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)
.
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屋!