javascript - 如何检测两个手指触摸 : 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]]对象，或者更具体地说，我需要通知用户使用两根手指而不是一根手指来移动 map 。

Answer 1

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

像这样:

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

根据 MDN DOC :

A TouchList listing all the Touch objects for touch points that are currently in contact with the touch surface, regardless of whether or not they've changed or what their target element was at touchstart time.

This property is Read only .

Could be thought of how many separate fingers are able to be identified to be touching the screen.