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