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>

 

 

以上內容代表個人觀點，僅供參考，不喜勿噴。。。