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手机端长按事件以及禁止长按弹出菜单的资料请关注脚本之家其它相关文章!
相关文章
使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】
这篇文章主要介绍了利用 proxytable 配置解决 vue-cli 的跨域请求问题,本文的目录结构基于 webpack 模板结构,需要的朋友可以参考下2018-05-05vue3插槽:el-table表头插入tooltip及更换表格背景色方式
这篇文章主要介绍了vue3插槽:el-table表头插入tooltip及更换表格背景色方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06vue 跳转页面$router.resolve和$router.push案例详解
这篇文章主要介绍了vue 跳转页面$router.resolve和$router.push案例详解,这样实现了既跳转了新页面,又不会让后端检测到页面链接不安全之类的,需要的朋友可以参考下2023-10-10Element el-table的formatter和scope template不能同时存在问题解决办法
本文主要介绍了ElementUI el-table 的 formatter 和 scope template 不能同时存在问题解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-08-08vue中的el-tree @node-click传自定义参数
这篇文章主要介绍了vue中的el-tree @node-click传自定义参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08
最新评论