react中移动端双击事件

前言

js原生有dbClick事件，但是几乎不支持移动端

所以在移动端上要实现双击事件要另谋出路

在移动端单击会依次触发touchstart->touchmove->touchend->click事件

可以通过touchstart来模拟双击

state = {
    lastClickTime: 0
}

componentDidMount() {
   const container =  document.getElementsByClassName("dbContainer");
   container.addEventListener('touchstart', (e) => {
      // 区分单指和双指
      if (e.touches.length === 1) {
        this.handleTouchStart(e);
      }
    })
}

componentWillUnmount() {
    const container =  document.getElementsByClassName("dbContainer");
    container.removeEventListener('touchstart');
}

handleTouchStart(e) {
    e.preventDefault();
    e.stopPropagation();
    if (currentTime - this.state.lastClickTime < 300) {
      // 在移动设备上模拟双击事件,所需要执行的事件
      
    }
    this.setState({lastClickTime: currentTime});
}

render() {
    return (<div className="dbContainer"></div>)
}

一个简单的移动端双击事件就完成啦！