问题:
对于同一控件同时设置@tap和@longpress,会发现长按时先出现@longpress的事件,然后触发点击事件tap。
通过测试,我们发现,小程序中事件执行的顺序是
点击:touchstart → touchend → tap
长按 touchstart → longpress → touchend → tap
解决方法一:
<view
v-else
class="posterImg"
@touchstart="bindTouchStart"
@touchend="bindTouchEnd"
@longpress="bingLongTap"
@tap="bindTap"
>
<image
:src="posterImgUrl"
show-menu-by-longpress="true"
mode="aspectFit"
style="width: 100vw; height: 100vh"
/>
</view>
touchstart(e) {
this.startTime = e.timeStamp;
}
touchend(e) {
this.endTime = e.timeStamp;
}
tap(e) {
if(this.endTime - this.startTime < 350) {
console.log("点击")
}
}
longpress(e) {
console.log("长按");
}
解决方法二:
data(){
return {
lock: false,
}
}
touchend(e) {
if(this.lock) {
setTimeout(()=>{
this.lock = false;
}, 200)
}
}
tap(e) {
if(this.lock) return;
console.log("点击")
}
longpress(e) {
this.lock = true;
console.log("长按");
}
注意:长按触发事件@longTap`和`@longpress`的区别
经过实践,发现在微信和h5端只有longpress起效果,在支付宝小程序端只有longTap起效果,一开始做用了longpress,结果坑了支付宝,这两个还要用区分编译分开来写两套代码
我在想官方不能把不同环境的长按事件合成一个吗?还是有技术难题?