Есть ли способ обнаружить касание двух элементов DOM одновременно, используя события касания JS?

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