移动端的执行顺序:touchstart->touchmove->touchend->click

需求:点击消息查看详情,长按消息执行删除操作

点击事件正常触发,触摸事件正常触发,不会互相影响

问题:再执行删除操作的时候会连带点击事件一起执行

当使用@touchstart.prevent的时候不会触发click事件,但正常点击事件也不生效了

当使用@touchstart.stop的时候不生效

在函数里使用e.preventDefault()也不生效,

最后看到一篇文章用变量判断,所以最后决定使用变量判断

{{item.title}}{{item.createTime}}{{item.content}}暂无消息import {ref} from 'vue'import useUserStore from '@/store/user.js'import { API_URL } from '@/commponents/request/env'import tabbar from '@/commponents/tabbar/tabbar.vue'import api from '@/commponents/request/index';import {onShow,onPullDownRefresh } from "@dcloudio/uni-app";// tab---pinalet useStore = useUserStore()const messagelist = ref([])const Loop = ref([])// 控制tabbar显示const loadingTab = ref(false)// 判断是否是点击事件const isClick = ref(true)// 新消息数量let messagenum = ref(0)// 初始化函数const showFn = ()=>{messagenum.value = 0loadingTab.value = falseapi('wx.getMessageList',{PageIndex:1,PageSize:999}).then(res=>{uni.stopPullDownRefresh()messagelist.value = res.data.rowsres.data.rows.forEach(item=>{ if(item.messageStatus == 0){ // 新消息数量 messagenum.value++ }})// 存到pina里面useStore.setMessagenum(messagenum.value)loadingTab.value = true})}onShow(()=>{showFn()})// 下拉刷新onPullDownRefresh(async ()=>{await showFn()})// 点击消息进入详情页const messageCountFn = (item)=>{if(isClick.value){uni.navigateTo({url: '/pages/message/messagecount?id='+item.id});}}// 开始触摸---用于删除消息const touchstart = (id)=> {isClick.value = trueclearInterval(Loop.value); //再次清空定时器,防止重复注册定时器Loop.value = setTimeout(function() {isClick.value = falseuni.showModal({title: '删除',content: '请问要删除本条消息吗?',success: function(res) {if (res.confirm) {uni.request({url:`${API_URL}/client/delMessage?id=${id}`,header: {Authorization:'Bearer ' + uni.getStorageSync('token')},method:'DELETE',success(res){if(res.data.statusCode == 200){uni.showToast({title: '删除成功',duration: 2000})showFn()}}})} else if (res.cancel) {}}});}.bind(), 1000);}// 触摸结束---用于删除消息const touchend = ()=> {clearInterval(Loop.value);}.uni-nomessage{text-align: center;margin-top: 122rpx;box-sizing: border-box;.text{color: #999999;}image{width: 153px;height: 130px;}}.uni-message{display: flex;margin:10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;// justify-content: space-evenly;.uni-img{width: 41.5px;height: 41.5px;border-radius: 10px;image{ width: 41.5px; height: 41.5px;}}.uni-counts{width: 80%;margin-left: 10px;.uni-def{margin-bottom: 5px;}.uni-top{display: flex;justify-content: space-between;text{width: 80vw;display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-family: Source Han Sans CN;font-size: 14px;font-weight: normal;line-height: normal;text-align: left;letter-spacing: 0em;color: #999999;}.mees{color: #000;font-size: 15px;font-weight: 400;}}}}