vue3开发移动端过程中遇到的一些细节问题

最新推荐文章于 2024-07-22 18:27:55 发布
最新推荐文章于 2024-07-22 18:27:55 发布
阅读量380 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53939067/article/details/134986604
文章讨论了移动端开发中，推荐使用@touchend或@touchstart代替@click事件，因为touch事件在移动设备上更精确，避免了在div周边误触触发click事件的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

点击事件别用@click

移动端在里面不用@click事件，最好用@touchend或者@touchstart代替。
具体原理我不知道为什么，因为我在某一个盒子div中注册@click事件，浏览器模式下是非常精准的。但是换成移动端在div附近点击也会触发@click事件，而@touch…事件是好的。
下面的演示是移动端下的@click事件
在这里插入图片描述

更新

胡晓恒。
关注
vue3--事件处理
Missing Sunshine的博客
03-14 1140
Vue使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些JS代码比如 v-on:click=“methodName” 或使用缩写方式 @click=“methodName”</</</
vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript
局外人LZ的博客
02-29 2999
本文只是大致讲了下vue3 pc端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。
vue移动端解决click延迟，封装tap，滑动等多个移动端事件js
04-26
移动端点击click事件会有300ms的延迟，而vue没有封装js的移动端tap事件，使用时，页面引用[removed][removed]，通过<li v-tap="{fn:vueTouch,active:0}">全部</li> fn：vueTouch调用。
vue3中的事件等
小白菜的博客
07-13 404
【代码】vue3中的事件等。
vue手机端事件
Hello_路子
12-04 469
首先需引入vue.js文件这就不用说了 在手机端一共有三个事件分别是 按下,滑动,抬起 @touchstart="方法" @touchmove="actionEa" @touchend="actionEc"
Vue实现移动端左右滑动效果的方法
10-17
它不仅包括了从需求分析、技术选型、库的使用到事件绑定和调试的全过程，还特别强调了在实现特定效果时需要注意的细节问题。对于有类似需求的开发者来说，本例提供了一个宝贵的参考，让他们能够在类似场景中快速实现...
基于Vue框架的管家MES移动端设计源码
最新发布
02-14
备份文件能够帮助开发团队在开发过程中遇到问题时快速回退到稳定版本。 在项目文件的组织上，可以看到.gitignore文件，它用于指定Git版本控制系统忽略的文件和目录，有助于保持仓库的清洁和项目的整洁。babel....
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
10-18
在Vue.js应用中，开发一个能够在线预览PDF文件的插件时，常常会遇到手机浏览器不支持直接预览的问题。在这种情况下，可以利用pdf.js库来解决这个问题。pdf.js是一个由Mozilla维护的开源库，它能提供跨平台的PDF文档...
实战Vue：基于Vue的移动端购物商城
2401_84419493的博客
06-20 1204
首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作在Cart.vue中配置删除商品的方法。
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
vue中touch和click共存的解决方式
11-20
在vue开发手机端项目时，我们经常会遇到touch和click共存的情况，比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动，所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要添加在touchstart事件上，会影响到click事件的发生。 touch事件和click事件发生先后顺序： touchstart，touchmove，touchend，click 补充知识：touchstart与click同时触发 产生冲突的原因 我们可以给某个元素同时绑定 touchstart 和 click 事件，但这将会导致本篇文章解决的问题
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
10-17
主要介绍了vue 界面在苹果手机上滑动点击事件等卡顿解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue3代码触发某个元素点击事件；printButton.value.$el.click()
i_am_a_div的博客
07-22 1819
vue3代码触发某个元素点击事件
vue移动端项目使用click，点击延迟300ms解决方法
asteriaV的博客
04-02 901
在开发微信端时，发现在Android下面，click事件非常的流畅，而在IOS下却有一定的延迟。查了查资料，发现早在2007年，苹果为了解决在Iphone这种小屏幕浏览器站点的问题，就设置了300毫秒的延迟。这是为了系统判断用户是双击还是单击屏幕。 vue项目中，可以通过引入fastclick第三方依赖包来解决。 1、安装fastclick依赖： npm install fastclic...
解决@touchstart和@click事件触发冲突问题,可使@touchstart和@click分别执行
weixin_42479305的博客
11-08 7381
只用在@click加stop，且在onTouchMove上添加阻止点击事件触发——e.preventDefault();即可完成拖动事件@touchstart和点击事件@click分别执行功能，且可以修复拖动按钮时会导致页面滚动问题。@touchstart不加修饰符,在onTouchStart点击事件中触发阻止click事件。如果需要阻止点击事件不触发，只触发@touchstart;事件，比如拖拽事件同时添加返回上一页功能;一般出现在我们给某个元素同时绑定。
Vue 3.0 事件处理 【Vue3 从零开始】
2201_75866484的博客
02-22 3763
在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。在监听键盘事件时，我们经常需要检查详细的按键。修饰符允许你控制由精确的系统修饰符组合触发的事件。
解决大屏、移动端中 vue的touchStart事件及click、mouseup事件冲突问题
liuxiaocaie的博客
02-21 3553
解决大屏、移动端中 vue的touchStart事件及click、mouseup事件冲突问题
Vue入门（十一）之移动端事件
qq_38256266的博客
08-18 3850
vueX补充及移动端事件1、vueX补充2、postman3、移动端事件3.1、click事件（单击事件）3.2、touch类事件（触摸事件）3.3、touch的优先级高于click3.4、阻止click事件的触发3.5、点透3.6、第三方的移动端事件库4、下拉刷新上拉加载（Better-scroll） 1、vueX补充 mapState, mapGetters, mapActions, mapMutations 昨天我们讲到vueX的基本使用，当一个组件需要获取多个状态的时候，代码会有些重复和冗余。 这时
uniapp开发vue3监听右滑返回操作，返回到指定页面，解决边缘区域监听错误问题
05-24 1915
想要在uniapp框架中监听左滑或者右滑手势，需要使用touchstart和touchend两个api，因为没有原生的左右滑监听api，所以我们只能依靠这两个api来获取滑动开始时候的x坐标和滑动结束后的x坐标做比对，右滑的话，结束时候的x坐标-开始的x坐标肯定是大于一定阈值的，比如大于50，我们就算它右滑了。当滑动距离大于50，说明是右滑返回操作：处理自定义返回操作backHandle。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值