在uniapp中实现长按事件（屏蔽点击事件）

2023-09-04 19:05

短信预约 -IT技能 免费直播动态提醒

在uniapp中实现长按事件（屏蔽点击事件）

问题

在uniapp使用官方提供的长按点击事件时会触发点击事件

<view @longpress="longpress">    <text>点击我text>view>

longpress() {console.log("长按事件");},

这样使用在元素上只绑定了长按事件时没有任何问题，但如果元素上同时绑定的单击事件就无法区分

解决

原理

点击事件在点击结束后才会触发。
长按事件在点击持续一定时间后就会触发

方案

我们可以定义一个记录是否是长按的变量，在触发点击事件后判断是否触发了长按。如果是就什么都不做，如果不是正常执行逻辑。

代码

<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)           }        }}