H5页面新增鼠标右击和长按触发事件
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", }); };
4.禁止弹出右击默认菜单
document.oncontextmenu = function () { return false; }
即可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2022-04-23 用vbs实现简单的循环弹框
2022-04-23 用Excel实现抽奖程序
2020-04-23 typora的使用和Markdown基本语法
2020-04-23 使用zeit部署页面
2020-04-23 给网站增加音乐播放器