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

即可。