H5移动端React长按删除实现

长按删除评论功能

html

<p className='review-content' onTouchStart={(e)=>{this.gtouchstart(e,id)}} onTouchMove={(e)=>{this.gtouchmove(e,id)}} onTouchEnd={(e)=>{this.gtouchend(e,id)}}>哈哈哈哈哈</p>

方法

 let timeOutEvent=0;//定时器    
  //长按事件
 gtouchstart(e,id){  
    var that =this;
    this.longClick=0;
    this.timeOutEvent =setTimeout(function(){
        that.longClick=1;
        alert(`长按,${id}`)
        //设置长按时的操作
    },500)  
};   
 
 gtouchend(e,id){
    clearTimeout(this.timeOutEvent);
    if(this.timeOutEvent!=0 && this.longClick==0){//点击
         //此处为点击事件----在此处添加跳转详情页
        alert(`点击,${id}`)
     }
     return false;  
};   
    
 gtouchmove(e,id){   
    clearTimeout(this.timeOutEvent);
    this.timeOutEvent = 0;
    e.preventDefault();
}