vue长按事件

 html

<template>
 <div>
	<div class="list wauto" @touchstart="gtouchstart(1)" @touchmove="gtouchmove()" @touchend="gtouchend(1)">长按事件</div>
  </div>
</template>

js

<script>
	export default {
		data() {
			return {
				timeOutEvent:0
			}
		},
		mounted: function() {
		},
		methods: {
			//开始按
	          gtouchstart(item){
	          	 var self = this;
	              this.timeOutEvent = setTimeout(function(){
	                  self.longPress(item)
	              },500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
	              return false;
	          },
	          //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
	          gtouchend(item){
	              clearTimeout(this.timeOutEvent);//清除定时器
	              if(this.timeOutEvent!=0){
	                  //这里写要执行的内容（尤如onclick事件）
	                  this.goChat(item);
	              }
	              return false;
	          },
	          //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
	          gtouchmove(){
	              clearTimeout(this.timeOutEvent);//清除定时器
	              this.timeOutEvent = 0;
	
	          },
	          //真正长按后应该执行的内容
	          longPress(id){
	              this.timeOutEvent = 0;
	              //执行长按要执行的内容，如弹出菜单
	              console.log("执行的内容");
	          },
	          goChat(id){
	              console.log("点击");
	              
	          }
			
		}
	}
</script>