如何检测双指触控：ReactJS

Question

我有一个touchMove事件处理程序。

我试图访问事件对象，更具体地说是显示器上触摸的数量。

<div className={"LeafletMap"} onTouchMove={(e) => this.handleMapMove(e)}  onTouchStart={this.handleMapTouch} >
....

然后我在处理程序方法中访问事件。

handleMapMove = (e) => {
   console.log(e);
   ...
};

在控制台中，我可以看到

Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …}
[[Handler]]: Object
[[Target]]: SyntheticTouchEvent
[[IsRevoked]]: false

如何在示例中访问[[Target]]对象，更具体地说，我需要通知用户使用两个手指移动地图而不是一个手指。

- Stevan Tosic

---

console.log(e.target) ?? - Mayank Shukla

但是这会将HTML返回到被点击的元素，我需要返回触摸的次数。 - Stevan Tosic

意味着，该元素被访问的次数是多少，对吗？ - Mayank Shukla

是的，更具体地说，我需要通知用户使用两个手指来移动地图而不是一个。 - Stevan Tosic

你是我今天的英雄 :) - Stevan Tosic

Answer 1

您可以使用触摸事件的touches属性，其中包含所有可用的触摸点。

像这样：

handleMapMove = (e) => {
    console.log(e.touches);
};

根据MDN DOC：

一个 TouchList 列出当前与触摸表面接触的所有 Touch 对象，无论它们是否已更改或它们在 touchstart 时的目标元素是什么。

此属性只读。

可以想象成有多少个单独的手指可以被识别为触摸屏幕。

- Mayank Shukla

Answer 2

您可以像这样访问它：

let target = e.target || e.srcElement;

这将给你一个常规的 DOMNode 对象。但你可以在其上调用常规的 DOMNode 函数，所以下面的代码会返回目标节点的 id：

target.getAttribute('id')

请查看文档：target - mozilla

根据您的评论进行编辑

要获取点击次数，请在React组件的状态中保存点击次数并使用它。

请查看以下示例：

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
      show: true
    };
  }

  IncrementItem = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  }
  DecreaseItem = () => {
    this.setState({ clicks: this.state.clicks - 1 });
  }
  ToggleClick = () => {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <div>
        <button onClick={this.IncrementItem}>Click to increment by 1</button>
        <button onClick={this.DecreaseItem}>Click to decrease by 1</button>
        <button onClick={this.ToggleClick}>
          { this.state.show ? 'Hide number' : 'Show number' }
        </button>
        { this.state.show ? <h2>{ this.state.clicks }</h2> : '' }
      </div>
    );
  }
}

我从这里获取了信息：medium.com

根据评论中添加的更多信息...

您似乎想要获取显示器上手指的数量，您不需要目标事件，而是需要 "触摸事件".

要检查是否有两个手指点击，可以使用以下代码：

handleMapMove = (e) => {
   if(e.touches.length == 2){
     console.log("yay, two finger press")
   }
};

- Rick van Lieshout