html页面添加长按事件

Posted 2022-04-26 newbest

记录是为了更好的成长！

<view class="money">
   <text class="pic_bg" @click="checkValue(item.value)" v-for="item in price" :key="item.text" 
         @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend(item.value)"> item.text </text>
</view>

 

<script>
    
//import  Picker  from ‘vux‘

export default 
    /*components: 
      Picker
    ,*/
  data() 
    return 
        timeOutEvent: 0 //定时器
    
  ,
  mounted() 
    
  ,
  methods: 
    //开始按   
            gtouchstart()   
                this.timeOutEvent = setTimeout(this.longPress(),500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改
                return false;   
            ,  
            //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件   
            gtouchend(text)   
                clearTimeout(this.timeOutEvent);//清除定时器   
                if(this.timeOutEvent!=0)   
                    //这里写要执行的内容（
                    this.value = text;
                    this.buttonDisabled = false;
                   
                return false;   
            ,  
            //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按   
            gtouchmove()   
                clearTimeout(this.timeOutEvent);//清除定时器   
                this.timeOutEvent = 0;    
            ,   
            //真正长按后应该执行的内容   
            longPress()   
                this.timeOutEvent = 0;   
            
  ,
  

</script>

 

 

以上内容代表个人观点，仅供参考，不喜勿喷。。。