Tengo el controlador de eventos touchMove.

Estoy tratando de acceder al objeto de evento o ser el número más específico de toques en pantalla.

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

Luego accedo al evento en el método del controlador

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

En la consola puedo ver

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

¿Cómo puedo acceder a [[Target]] object en un ejemplo, o para ser más específico, Necesito notificar al usuario que use dos dedos para mover el mapa en lugar de uno?

2
Stevan Tosic 19 feb. 2018 a las 15:55

2 respuestas

La mejor respuesta

Puede utilizar la propiedad touches del evento táctil, contendrá todos los puntos táctiles disponibles.

Así:

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

Según MDN DOC :

Una lista táctil que enumera todos los objetos táctiles para los puntos táctiles que están actualmente en contacto con la superficie táctil, independientemente de si han cambiado o no o cuál era su elemento objetivo en el momento del inicio táctil.

Esta propiedad es de sólo lectura .

Podría pensarse en cuántos dedos separados se pueden identificado para tocar la pantalla.

2
Mayank Shukla 19 feb. 2018 a las 13:32

Puedes acceder de esta manera:

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

Sin embargo, esto le dará un DOMNode normal.

Sin embargo, puede llamar a la función DOMNode normal, por lo que lo siguiente devolvería la identificación del nodo de destino:

target.getAttribute('id')

Eche un vistazo a la documentación: target - mozilla

Edita según tus comentarios

Para obtener el número de clics, guarde el número de clics en el estado de su componente React y utilícelo.

Eche un vistazo al siguiente ejemplo:

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

Que tomé de: medium.com

Basado en más información agregada a través de comentarios.

Parece que desea obtener la cantidad de dedos en la pantalla, no necesita el evento de destino para eso necesita "eventos táctiles".

Para comprobar si dos dedos han hecho clic, puede utilizar el siguiente código:

handleMapMove = (e) => {
   if(e.touches.length == 2){
     console.log("yay, two finger press")
   }
};
1
Rick van Lieshout 19 feb. 2018 a las 13:37