携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

因为之前使用uni-app做备考小程序时需要有一个功能：点击可以发送一次请求获取数据并渲染到页面中，长按可以清除获取到的数据。自认为很简单于是便直接着手开始制作，但是在绑定@tap与@longtap时遇到了问题——点击时只会触发tap所绑定的函数，但是长按时tap与longtap同时触发了。解决方案是加一个限制以达到长按时不允许tap触发

大致思路

现在的html结构如下

<view class="sentence text-center fontS28"
@tap="getSentence" @longtap="noSentence" @touchend="touchend">
	<text>{{obj.sentence.hitokoto}}{{obj.sentence.from}}</text>
	<view class="fontS24">
		点击以获取一条句子，长按以取消
	</view>
</view>

要想达到限制tap所绑定的函数不触发，则需要一个锁来锁住tap，于是我们在data中定义一个lock默认为false，而且需要在tap所绑定的函数中添加一个 if 判断，于是有

data

data() {
	return {
		lock: false,
	}
},

methods中添加如下三个函数

getSentence() {
	if (!this.lock) {
            //你的别的代码
        }
},

上面这段对于我需要的功能而言是用来单机时请求数据的

上面的这一段代码很简单，就是一个 if 判断，里面包着需要的内容

noSentence() {
	this.lock = true
	//你的别的代码
}

上面这段对于我需要的功能而言是用来长按时清除数据的

因此长按时对data中的lock修改值为true，代表上锁

touchend() {
	setTimeout(() => {
		this.lock = false
	})
},

上述这段代码是当touched事件触发时调用的，使用setTimeout的原因我具体也不太清楚，我估计是利用定时器，将定时器内的用于解锁的代码加入队列中使其延迟到tap事件结束后执行，亲测去掉这一段无法实现锁与解锁功能

@tap、@longtap、@touched的触发顺序

@tap: 所绑定函数在点击后离开时触发

@longtap: 所绑定函数在用户长按屏幕350ms后触发，文档上说如果指定了@tap事件，则@tap事件不会触发，但是我自己使用时仍需要自己写一个锁来限制

@touched: 所绑定函数在触摸事件结束后触发

三者触发顺序: