在uniapp中实现长按事件(屏蔽点击事件)
问题
- 在uniapp使用官方提供的长按点击事件时会触发点击事件
<view @longpress="longpress">
<text>点击我</text>
</view>
longpress() {
console.log("长按事件");
},
这样使用在元素上只绑定了长按事件时没有任何问题,但如果元素上同时绑定的单击事件就无法区分
解决
原理
- 点击事件在点击结束后才会触发。
- 长按事件在点击持续一定时间后就会触发
方案
我们可以定义一个记录是否是长按的变量,在触发点击事件后判断是否触发了长按。如果是就什么都不做,如果不是正常执行逻辑。
代码
<!-- @touchend 是为了在点击结束后执行将记录长按变量重写变为 false,等待下一次点击 -->
<view @longpress="longpress" @click="click()" @touchend="touchend">
<text>点击我</text>
</view>
export default {
data() {
return {
islongPress: false, //长按记录变量
};
},
methods: {
longpress(){
console.log("长按事件");
this.islongPress = true;
},
click(){
if(this.islongPress == false){
console.log("不是长按事件");
}else if(this.islongPress == true){
console.log("长按事件");
}
},
touchend(){
//延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
setTimeout(() => {
this.islongPress = false
}, 200)
}
}
}