时间戳

首页 > 解决方案 > 有没有办法使用js触摸事件同时检测两个dom元素的触摸？

javascript - 有没有办法使用js触摸事件同时检测两个dom元素的触摸？

问题描述

我正在使用 angular6 创建一个简单的移动应用程序。我的应用程序中有两个按钮，我需要在同时单击/点击两个按钮时调用一个函数。经过大量搜索，我找到了js中的触摸事件处理函数。这是我的代码

app.component.ts

  testfunc(event) {
    this.testval = 1;
  }

  testfunc1() {
    this.testval = 2;
  }

  testfunc2(event) {
    event.preventDefault();
    if (this.testval == 1) {
      alert(this.testval);
    }
  }

app.component.html

 <div class="clutchBtn" #clBtn (touchstart)="testfunc($event)"  (touchend)="testfunc1()"></div>
 <div class="gearBtn" #gearBtn (touchstart)="testfunc2($event)"></div>

在上面的代码中，我使用 'touchstart' 和 'touchend' 事件处理程序来检测 dom 元素中触摸事件的进入和离开。如果用户触摸第一个按钮，则将调用 testfunc() 并获取 'testVal' 的值将设置为 1。如果用户手指从第一个按钮上移开，则“testVal”的值设置为 2。然后我在第二个按钮中添加一个 testfun2() 来检测用户是否仍然触摸第一个按钮。问题是触摸事件无法正常工作，即，当我同时按下两个按钮时，将显示警报框，然后当我只按下第二个按钮时它仍然显示。因为 testVal 的值仍然是'1'。我该如何解决这个问题？有没有其他好的方法来检测同时点击两个按钮？

标签： javascriptangular6

解决方案

你应该能够查询元素

@ViewChild('buttonVar') button;
touchStart1$:Observable<any>;

然后申请注册触摸事件

ngOnInit() {
  this.touchStart1$ = Observable.fromEvent(this.button.nativeElement, 'touchstart');
}

对按钮执行此操作并使用 RxJSforkJoin运算符组合两个可观察对象以等待两个操作被单击。

编辑：事实上，不要使用forkJoin. 还有更多要实现的描述。对于工作示例，请查看此 stackblitz： https ://stackblitz.com/edit/angular-5cjt1b

推荐阅读