首页 > 其他分享 >H5页面新增鼠标右击和长按触发事件

H5页面新增鼠标右击和长按触发事件

时间:2023-04-23 14:23:00浏览次数:45  
标签:右击 index const 鼠标 触发 value H5 item isLongpress

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

相关文章

  • 修复H5长按自动调起系统选择功能的缺陷
    缺陷:H5长按自动调起系统选择功能解决方法:在App.vue或是需要用到长按事件响应的页面加上*{//禁止h5长按调起系统菜单-webkit-touch-callout:none;/*系统默认菜单被禁用*/-webkit-user-select:none;/*webkit浏览器*/-khtml-user-select:none;/*早期浏览器*/......
  • 前端必须学会的vueh5布局瀑布流 简易通俗易懂 左右排版
    css简易版瀑布流布局通过v-if="index%2===0"v-if="index%2===1"进行判断显示左边右边左右瀑布流排版,在每一列中交替地排放元素。具体来说,可以通过对每一列进行编号,然后对奇数列和偶数列分别设置不同的样式来实现左右瀑布流排版。html<div><cl-pull-refreshv-model="isR......
  • 使用proxy实现一个监听鼠标事件
    由于弹框遮罩层问题,如果绑定鼠标移入移出事件不能顺利,就想着监听鼠标坐标来实现,vue拥有监听器实现简单,就想着用proxy来做一个如下代码<template><divid="x">x:0</div><divid="y">y:0</div><divclass="myDiv"index="1">mydiv1</div&......
  • H5混合开发二维码扫描以及调用本地摄像头
    H5混合开发二维码扫描以及调用本地摄像头 [转]http://www.jianshu.com/p/c952b3a5e1d2今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触......
  • BLE无线性能粗测-CH582 CH592 CH573
    BLE无线信号好的基础是硬件设计要遵循一定的要求,具体如下:CH582M原理图设计如果没有遵循以上要求,BLE无线信号是没有办法保证的,后面的测试方法可以继续,可能改善,但是可能影响不大(举个例子,身高179cm,随便穿个鞋子就180+了,如果只有150cm,想通过穿鞋子达到180+,你品品)。测试第一步:下载......
  • uniapp h5与app接口路径
      h5版本前面带不带‘/’都不会报错接口路径拼接前应该有逻辑默认补'/'app后就会报错 ......
  • python pyautogui检测鼠标点击事件
    目录pythonpyautogui检测鼠标点击事件pythonpyautogui检测鼠标点击事件在Python中,可以使用pyautogui模块来检测鼠标的点击事件,并判断左键或右键。下面是一个示例代码,可以检测鼠标的点击事件,并根据左键或右键输出不同的信息:pythonCopyimportpyautoguiwhileTrue:tr......
  • h5项目怎么嵌入到微信小程序中
    背景:最近用vue开发了一个h5的项目,然后产品说想把它上到微信小程序里面去,ok,开干!第一步:web-view<!--index.wxml--><viewclass="container"><web-viewsrc="https://xxx.xxxx.com/"/></view>第二步:在小程序中配置域名白名单     第三步:可以正常开发,调试啦遇......
  • CH58xFLASH操作
    一、描述读:从FLASH将数据赋值给buff;写:从buff将数据赋值给FLASH;DataFlash特点:擦/ERASE写/READ读/WRITE0.25KB(的倍数)/4KB(的倍数)1Byte/多个Byte/256Byte(的倍数,best)1Byte/多ByteCodeFlash特点:擦/ERASE写/READ读/WRITE4KB(的倍数)4Byte4Byte/256Byte(的倍......
  • 直播小程序源码,小程序生成二维码 (兼容H5、微信小程序)
    直播小程序源码,小程序生成二维码(兼容H5、微信小程序)1、<canvastype="2d"style="width:127px;height:127px;position:fixed;top:-1000px;"id="myQrcode"></canvas>注意:不能再v-if内,否则会导致找不到该节点 2、importdrawQrcodefrom'@/common/qrcodeJs......