CODEWITHSUNDEEP
javascriptreactjs
Stevan Tosic
Stevan Tosic

Reputation: 7199

How to detect two finger touch: ReactJS

I have touchMove event handler.

I am trying to access event object or to be the more specific number of touches on display.

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

Then I access event in handler method 

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

In the console, I can see 

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

How Can I access [[Target]] object in an example, or to be more specific, I need to notify the user to use two fingers to move map instead of one.

Upvotes: 3

Views: 4306

Answers (2)

Rick van Lieshout
Rick van Lieshout

Reputation: 2316

You can access it like this:

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

This will give you a regular DOMNode though.

You can call regular DOMNode function on it though, so the following would return the id of the target node:

target.getAttribute('id')

Take a look at the documentation: target - mozilla

Edit based on your comments

To get the number of clicks save the number of clicks in your React component's state and use that.

Take a look at the following example:

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

which I took from: medium.com

Based on yet more information added through comments..

You seem to want to get the number of fingers on the display, you don't need the target event for that you need "touch events".

To check whether two fingers have clicked you can use the following code:

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

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104369

You can use touches property of the touch event, it will contain all the touch points available.

Like this:

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

As per 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.

Upvotes: 3

Related Questions