Hammer JS pressup 不适用于触摸屏？答案

【问题标题】：Hammer JS pressup does not work for touch screen?Hammer JS pressup 不适用于触摸屏？
【发布时间】：2019-03-15 15:27:25
【问题描述】：

我正在尝试在 Angular 5 应用程序中实现一项功能，如果您按住按钮，它将开始增加值 1,2,3,4 .. . 直到你按下到那个按钮为止。

如果您使用鼠标按住它会很好，但是当我尝试使用 touch device 时，它有时会起作用，有时会不起作用。

我调试了一下，发现问题是长按时检测不到上压。

这是我的实现

 <button id="btn-legend-decrease" (press)="mouseOnPressedDe($event)" (pressup)="mouseOnStop($event)">
      <mat-icon aria-label="Decrease scale" color="primary">remove</mat-icon>
    </button>

    <button id="btn-legend-increase"  (press)="mouseOnPressedIn($event)" (pressup)="mouseOnStop($event)">
      <mat-icon aria-label="Increase scale" color="primary">add</mat-icon>
    </button>

知道如何在 Angular 中实现这种功能吗？

谢谢

【问题讨论】：

顺便说一句，我解决了这个问题。 1. 有时锤子无法监听 pressup 事件。 2. 对于触摸目的，最好使用 touchstart 和 touchend 事件。

标签： javascript angular hammer.js

【解决方案1】：

"press" 和 "pressup" 在大多数情况下在 html 中分配为处理程序时确实不起作用：

(press)="mouseOnPressedDe($event)"

我通过直接分配给touchEventManager 解决了这个问题。现在它就像时钟一样工作：

let touchEventManager = new Hammer(this.nativeElement, { inputClass: Hammer.TouchInput });
touchEventManager.on('press', this.onPress.bind(this));

【讨论】：