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; }

即可。

posted @   罗毅豪  阅读(176)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操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 给网站增加音乐播放器
点击右上角即可分享
微信分享提示