H5页面新增鼠标右击和长按触发事件,不影响点击事件。
示例如下:
1.新增触发事件
<van-cell class="list-item" v-for="item in dataSource.list" :key="item.id" @touchstart="longPress(item, index)" @touchend="removePress(item, index)" @touchmove="touchmove(item, index)" @mousedown.native="(e) => rightClick(item, index, e)" @click="goDetail(item)" is-link > <template #default> <div class="blue-bar"></div> <span class="item-title">{{ item.workConfName }}</span> <div> <div> 创建时间:{{ item.createTime ? parseTime(item.createTime) : "" }} </div> </div> </template> </van-cell>
2.定义触发事件
const isLongpress = ref(false); const touchstartTime = ref(""); const touchendTime = ref(""); const longPress = (item, index, e) => { touchstartTime.value = new Date().getTime(); isLongpress.value = true; }; const removePress = (item, index) => { curItem.value = item; touchendTime.value = new Date().getTime(); let duration = touchendTime.value - touchstartTime.value; if (isLongpress.value && duration >= 600) { showActionSheet.value = true; } }; const rightClick = (item, index, e) => { if (e.button == 2) { curItem.value = item; showActionSheet.value = true; } }; const touchmove = (item, index) => { // isLongpress.value = false; };
3.不影响原点击触发事件
const goDetail = (record) => { sessionStorage.workConf = JSON.stringify(record); router.push({ path: "/collectResult", }); };
即可。
标签:右击,index,const,鼠标,触发,value,H5,item,isLongpress From: https://www.cnblogs.com/luoyihao/p/17346427.html