Multi Touch is Not workig in Chrome

Question

i need to run a function if two div's pressed/tapped simultaneously.i tired below code but its executing event one after another. i got one sample code this is working fine in mobile device.but its not working in desktop chrome.

https://github.com/mdn/dom-examples/blob/master/touchevents/Multi-touch_interaction.html

Component HTML

  <div>
<div>
  <div (press)="leftDivMousedown($event)" (pressup)="leftDivMouseup($event)" ></div>

  <div (press)="rightDivMousedown($event)" (pressup)="rightDivMouseup($event)"></div>
</div>

Component class

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  private leftTouch: boolean = true;
  private rightTouch: boolean = false;

  leftDivMousedown(event) {
   this.leftTouch = true;    
    if (this.rightTouch) {
       console.log("bothclick");
     }
  }

  leftDivMouseup(event) {
    this.leftTouch = false;
  }

  rightDivMousedown(event) {
    this.rightTouch = true;
    if (this.leftTouch) {
     console.log("bothclick");
    }
  }

  rightDivMouseup(event) {  
    this.rightTouch = false;
  }

Answer 1

Are you sure that event name is press? Perhaps replacing press with touch my fix your problem.

https://www.w3schools.com/jsref/obj_touchevent.asp

Instead of press try using touchstart and instead of pressup use touchend.