uniapp的touchstart与click

移动端的执行顺序：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 = 0
	loadingTab.value = false
	api('wx.getMessageList',{
		PageIndex:1,
		PageSize:999
	}).then(res=>{
		uni.stopPullDownRefresh()
		messagelist.value = res.data.rows
		res.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 = true
	clearInterval(Loop.value); //再次清空定时器，防止重复注册定时器
	Loop.value = setTimeout(function() {
		isClick.value = false
		uni.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>