对于同一控件同时设置@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,结果坑了支付宝,这两个还要用区分编译分开来写两套代码
我在想官方不能把不同环境的长按事件合成一个吗?还是有技术难题?