其他分享
首页 > 其他分享> > html页面添加长按事件

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>

 

 

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

标签:定时器,false,text,html,timeOutEvent,return,添加,500,页面
来源: https://www.cnblogs.com/newbest/p/11215417.html