html页面添加长按事件

记录是为了更好的成长！

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

 

 

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

转载于:https://www.cnblogs.com/newbest/p/11215417.html