Question

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

Answer 1

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

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

以下代码适用于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>

Answer 2

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

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

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

2 个答案: