vant/vue手机端长按事件以及禁止长按弹出菜单

简介: vant/vue手机端长按事件以及禁止长按弹出菜单

手机端长按事件

先给两个事件

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

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

方法如下:

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

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

禁止长按弹出菜单

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

* {
  -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即可


相关文章
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程,包括使用过滤器部分隐藏展示的手机号和邮箱,以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现,其中验证码由后端生成并通过弹窗展示给用户,未来可以接入真正的手机验证码接口。此外,还提供了修改邮箱的页面效果截图,并强调了学习是一个永无止境的过程。
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
|
JavaScript 数据安全/隐私保护
Vue中如何使用过滤器来隐藏手机号、邮箱等字符串的中间部分内容
这篇文章介绍了在Vue中如何使用过滤器来隐藏手机号和邮箱等字符串的中间部分内容,以提高隐私保护。文章展示了实现效果,并提供了实现过程的代码示例,包括HTML部分的绑定、data部分的数据定义和script部分的过滤器定义。文章还解释了过滤器的概念、语法和使用方式,并提供了一个外部链接供读者获取更加详细的过滤器知识。
|
缓存 开发框架 前端开发
循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理
循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
217 7
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
242 12
|
关系型数据库 MySQL 测试技术
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)(4)
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)
170 2
|
数据库
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)(3)
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)
250 2
|
JavaScript
在vue使用vant在<stylus>中修改样式
在vue使用vant在<stylus>中修改样式
147 0
|
存储 安全 Java
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)(2)
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)
361 1
|
JavaScript Java 关系型数据库
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)(1)
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)
366 1

热门文章

最新文章