CODEWITHSUNDEEP
javascriptwebviewreactjs
Anuj Khandelwal
Anuj Khandelwal

Reputation: 1

How to detect long touch in javascript in mobile devices without jQuery

I found some solutions on StackOverflow but most of them are using jQuery. Is there any way to do this with pure JavaScript or ReactJS.

Upvotes: 0

Views: 1826

Answers (2)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

This is basic demo for mouse events: http://codepen.io/zvona/pen/avYgJg?editors=011. You need to use onTouchStart and onTouchEnd as well. Also delay (currently 300ms) should be tweaked for your purposes.

var LongTouch = React.createClass({
  getInitialState() {
    return {
      value: 'Touch me'
    }
  },

  startTouch() {
    this.touchTimeout = window.setTimeout(function() {
      this.setState({
        value: 'Long touch triggered'
      });
    }.bind(this), 300);
  },

  endTouch() {
    window.clearTimeout(this.touchTimeout);
    this.setState(this.getInitialState());
  },

  render() {
    return (
      <div
        className='longTouch'
        onMouseDown={this.startTouch}
        onMouseUp={this.endTouch}>
        {this.state.value}
      </div>
    )
  }
});

Upvotes: 1

Soley
Soley

Reputation: 1776

I think you need to manipulate time of event yourself.

You store the time in a field of the object, and when another event happens, do some math to get the time duration.

The code below works in PC, I believe touch is the same, but the mouse pointer is invisible.

<!DOCTYPE html>
<html>
<body>

<p onmousedown="__myfunc1(event)" onmouseup="__myfunc1(event)" >
Click and hold on this paragraph.
</p>

<p>Duration: <span id="demo"></span></p>

<script>
function __myfunc1(event) {
    src = event.srcElement;
    if(src.__t1 != null) {
       var n = event.timeStamp - src.__t1;
       src.__t1 = null;
       document.getElementById("demo").innerHTML = n;
    }
    else
       src.__t1 = event.timeStamp;
}
</script>

</body>
</html>

Upvotes: 0

Related Questions