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>

 

Logo

前往低代码交流专区

更多推荐