Vue 中 touch 事件无效解决方案

最新推荐文章于 2024-08-16 09:40:56 发布

超喜欢你呦

最新推荐文章于 2024-08-16 09:40:56 发布

阅读量3.6k

点赞数 1

分类专栏： Vue项目实战-Vant篇文章标签： vue

本文链接：https://blog.csdn.net/qq_36651686/article/details/115325982

版权

Vue项目实战-Vant篇专栏收录该内容

7 篇文章 4 订阅

订阅专栏

本文介绍了如何在Vue中利用`.native`修饰符添加原生事件监听，以及使用`.prevent`修饰符来禁止浏览器默认行为，例如在长按按钮时避免弹出右键菜单。通过示例代码展示了在`van-button`组件上应用这两个修饰符的方法，以实现更精确的事件控制。

摘要由CSDN通过智能技术生成

添加 `.native` 修饰符绑定原生事件

<van-button
   round
   @touchstart.native="onTouchStart"
   @touchmove.native="onTouchMove"
   @touchend.native="onTouchEnd"
 >
 Hold to Talk
 </van-button>

添加 `.prevent` 修饰符禁止浏览器默认行为（如长按弹出右键菜单等）

<van-button
   round
   @touchstart.native.prevent="onTouchStart"
   @touchmove.native.prevent="onTouchMove"
   @touchend.native.prevent="onTouchEnd"
 >
 Hold to Talk
 </van-button>