如何在没有jQuery的移动设备中检测javascript中的长按

Question

我在StackOverflow上找到了一些解决方案，但是大多数解决方案都使用jQuery。 有没有办法用纯JavaScript或ReactJS做到这一点。

Answer 1

这是鼠标事件的基本演示： http : //codepen.io/zvona/pen/avYgJg?editors=011 。 您还需要使用onTouchStart和onTouchEnd 。 延迟（当前为300ms）也应根据您的目的进行调整。

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

Answer 2

我认为您需要自己操纵事件的时间。

您将时间存储在对象的字段中，然后在发生另一个事件时，进行一些数学运算以获得持续时间。

下面的代码可在PC上运行，我相信触摸是相同的，但是鼠标指针是不可见的。

<!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>

如何在没有jQuery的移动设备中检测javascript中的长按

问题描述

2 个解决方案

解决方案1
1 2015-10-27 07:54:35

解决方案2
0 2015-10-27 07:18:31

如何在没有jQuery的移动设备中检测javascript中的长按

问题描述

2 个解决方案

解决方案1 1 2015-10-27 07:54:35

解决方案2 0 2015-10-27 07:18:31

解决方案1
1 2015-10-27 07:54:35

解决方案2
0 2015-10-27 07:18:31