Question

我正在使用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'，我该如何解决此问题？是否还有其他好的方法可以同时检测到两个按钮的点击？

Answer 1

您应该可以查询元素

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

然后应用注册触摸事件

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

对按钮都执行此操作，并使用RxJS forkJoin运算符将两个可观察对象组合在一起，以等待两个动作都被单击。

修改：实际上，请勿使用 ~~forkJoin~~ 。所描述的还有更多要实现的目标。对于工作示例，请查看以下堆栈闪电： https://stackblitz.com/edit/angular-5cjt1b

有没有办法使用js touch事件来同时检测两个dom元素的接触？

1 个答案: