vant/vue手机端长按事件以及禁止长按弹出菜单实现方法详解

 更新时间:2022年12月24日 13:36:41   作者:Nanchen_42  
这篇文章主要介绍了vant/vue手机端长按事件以及禁止长按弹出菜单实现方法详解,需要的朋友可以参考下

vant/vue实现手机端长按事件

先给两个事件

      @touchstart="start"
      @touchend="end"

 因为vue里的touchend没有封装,所以需要我们自己去写

方法如下:

    start() {
      clearTimeout(this.loop); //再次清空定时器,防止重复注册定时器
      this.loop = setTimeout(() => {
        console.log("长按了");
      }, 1000);
    },
 
    end() {
      clearTimeout(this.loop); //清空定时器,防止重复注册定时器
    },

 之后发现长按后出现弹出菜单的现象,所以这里要解决一下如何去禁用弹出的菜单

vant/vue实现禁止长按弹出菜单 

找到对应需要禁用菜单的页面 

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 document.oncontextmenu = function (e) {
      e.preventDefault();
    };

如果是想要停止冒泡,对需要停止冒泡的元素使用onclick.stop即可

以上就是vant/vue手机端长按事件以及禁止长按弹出菜单实现方法详解的详细内容,更多关于vant/vue手机端长按事件以及禁止长按弹出菜单的资料请关注脚本之家其它相关文章!

相关文章

  • Element plus 表单中下拉框的空值问题解决

    Element plus 表单中下拉框的空值问题解决

    有时候会碰到查询条件需要用下拉框来区分的时候,比如需要区分全部 | 启用 | 停用三个状态,这时一般会给全部的value值设置为'',但是这样会导致下拉框无法选中对应的全部选项,本文就来介绍一下这个问题解决,感兴趣的可以了解一下
    2024-11-11
  • Vue.js中使用components组件的实例讲解

    Vue.js中使用components组件的实例讲解

    这篇文章主要介绍了Vue.js中使用components组件的实例讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题

    Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题

    这篇文章主要介绍了Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 详解input组合事件如何监听输入中文

    详解input组合事件如何监听输入中文

    这篇文章主要为大家介绍了input组合事件如何监听输入中文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 使用vite发布app存在的所有问题解决方法

    使用vite发布app存在的所有问题解决方法

    最近项目中使用了vue3+vite开发一个App项,下面这篇文章主要给大家介绍了关于使用vite发布app存在的所有问题的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue组件内部引入外部js文件的方法

    vue组件内部引入外部js文件的方法

    这篇文章主要介绍了vue组件内部引入外部js文件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • vue页面回退或关闭,发送请求不中断问题

    vue页面回退或关闭,发送请求不中断问题

    这篇文章主要介绍了vue页面回退或关闭,发送请求不中断问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue.js中NaiveUI组件文字渐变的实现

    Vue.js中NaiveUI组件文字渐变的实现

    这篇文章主要介绍了Vue.js中NaiveUI组件文字渐变的实现,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • Vue3实现clipboard复制的使用示例

    Vue3实现clipboard复制的使用示例

    在日常开发中,为用户提供复制文本功能的需求比较常见,下面介绍一款vue3可用的插件,可以快速实现这个功能,感兴趣的可以了解一下
    2023-11-11
  • vue3使用videojs播放m3u8格式视频教程

    vue3使用videojs播放m3u8格式视频教程

    m3u8是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成,下面这篇文章主要给大家介绍了关于vue3使用videojs播放m3u8格式视频的相关资料,需要的朋友可以参考下
    2023-06-06

最新评论