react,vue移动端(手机端)长按事件

这里以react为例,vue差不多
render中随意定义一个

<div className={styles.commodity} key={index2} onTouchStart={this.start} onTouchMove={this.move} onTouchEnd={this.end}>

constructor(props) {
    super(props);
    this.state = {
      checkAll: false,
      longClick:0,  // 长按标志
      timeOutEvent: 0,  // 计时器
    };
  }
  start= ()=>{
    console.log("----start----")
    this.setState({timeOutEvent : setTimeout(()=>{
        this.setState({longClick : 1});  //  长按标志位
        // 此处为长按事件
        console.log("长按事件")
    },1500)})
  }

  move=(e)=>{
    console.log("----move----",this.state.timeOutEvent,this.state.longClick)
    clearTimeout(this.state.timeOutEvent)
    this.setState({longClick : 0});  // 清除标志位
    e.preventDefault();  // 阻止其他点击事件
  }
  end=(e)=>{
    clearTimeout(this.state.timeOutEvent)
    this.setState({longClick : 0});  // 清除标志位
    console.log("----end----",this.state.timeOutEvent,this.state.longClick)

    if(this.state.timeOutEvent !=0 && this.state.longClick==0){  // 判断是否非长按事件
         //此处为点击事件
        console.log('点击事件')
     }
     return false;
    }