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

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

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

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

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

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

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

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

<template><view><!-- 消息 --><view v-for="(item,index) in messagelist" :key="index" class="uni-message" @click="messageCountFn(item)" @touchstart="touchstart(item.id)"   @touchend="touchend"><uni-badge class="uni-badge-left-margin" :is-dot="item.messageStatus == 0" :text="item.messageStatus == 0?1:0" absolute="rightTop" size="small"><view  class="uni-img"><image src="@/static/other/messages.png" mode=""></image></view></uni-badge><view class="uni-counts"><view class="uni-top uni-def"><text class="mees">{{item.title}}</text><text>{{item.createTime}}</text></view><view class="uni-top"><text>{{item.content}}</text></view></view></view><view class="uni-nomessage" v-if="messagelist.length == 0"><image src="/static/other/nomessage.png" mode=""></image><view class="text">暂无消息</view></view><!-- tabbar --><tabbar  v-if="loadingTab"/></view>
</template><script setup>
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---pina
let 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);
}
</script><style lang="scss">.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;}}}}</style>