多点触控在Chrome中不起作用

时间:2019-06-09 12:01:48

标签: angular typescript touch-event hammer.js

如果两个div同时被按下/点击,我需要运行一个函数。我在代码下面累了,但是它的执行事件又一个接一个。 我得到了一个示例代码,在移动设备上可以正常工作,但在台式机Chrome中无法正常工作。

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

组件HTML

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

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

组件类

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;
  }

1 个答案:

答案 0 :(得分:1)

您确定已按下事件名称吗?也许用触摸代替印刷机可以解决您的问题。

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

与其按press,不如尝试使用touchstart,而代替pressup,请使用touchend。