vue中如何解决touch和click共存的问题

最新推荐文章于 2024-06-27 14:56:52 发布
原创 最新推荐文章于 2024-06-27 14:56:52 发布 · 1.0k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细解析了在Vue移动端开发中，touch与click事件的共存问题及解决策略。阐述了touchmove.prevent的作用，避免touch事件影响click事件，确保了城市选择页面等场景下用户体验的流畅。

在vue开发手机端项目时，我们经常会遇到touch和click共存的情况，比如城市选择页面的字母滑动

touch事件在手机端会触发浏览器滑动，所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要添加在touchstart事件上，会影响到click事件的发生。

touch事件和click事件发生先后顺序：

touchstart，touchmove，touchend，click

vue_t_v14
l1029455098的博客
03-21 3031
vue
vue学习
希望我快乐
06-11 963
1. 安装node，直接官网下载安卓即可，会自动安装上npm。 网址：https://nodejs.org 2. 检测node是否安装成功，在终端输入：node -v 以及 npm -v，若有版本信息，则安装成功。 3. 全局安装cli3 npm install -g @vue/cli vue -V(大写) 查看vue版本信息，若有信息则安装成功。 4. cd到工作目录，使用vue ui可视化创建...
解决@touchstart和@click事件触发冲突问题,可使@touchstart和@click分别执行
weixin_42479305的博客
11-08 7777
只用在@click加stop，且在onTouchMove上添加阻止点击事件触发——e.preventDefault();即可完成拖动事件@touchstart和点击事件@click分别执行功能，且可以修复拖动按钮时会导致页面滚动问题。@touchstart不加修饰符,在onTouchStart点击事件中触发阻止click事件。如果需要阻止点击事件不触发，只触发@touchstart;事件，比如拖拽事件同时添加返回上一页功能;一般出现在我们给某个元素同时绑定。
vue中touch和click共存的解决方式
10-15
主要介绍了vue中touch和click共存的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3触摸屏滑动事件（touch, swipe）使用注意事项
qiuzen的博客
06-27 1714
使用方法如下，有些特殊的情况下需要加一个disable_touch的开关来阻止swipe和press事件的发生。安装npm包：npm i vue3-touch-events。
vue移动端解决click延迟，封装tap，滑动等多个移动端事件js
04-26
移动端点击click事件会有300ms的延迟，而vue没有封装js的移动端tap事件，使用时，页面引用[removed][removed]，通过<li v-tap="{fn:vueTouch,active:0}">全部</li> fn：vueTouch调用。
vue 怎么监听button按钮长按和松开
最新发布
03-13
好的，我现在需要解决用户的问题：如何在Vue中实现按钮的长按和松开事件监听。用户提到了使用自定义指令，但不太清楚具体步骤。我需要先理解用户的需求，然后结合提供的引用内容来整理解决方案。 首先，用户希望...
【转载】移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
陌笙以笙箫
03-02 1045
原文地址：链接这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。做完之后在手机原生浏览器中运行正常，但在QQ和微信中打开，发现touchmove只会触发一次，而且touchend也经常不触发。之后百度了一下这个问题，原因是主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致touchmo...
移动端实现首字母列表滑动过程（自己用的一个实现方法 可能比较简易，希望多见谅）
weixin_54115156的博客
03-09 299
touchmove 在移动端中用户在屏幕上移动手指时发生的事件 touchstart 在移动端中用户触碰在屏幕上时发生的事件 touchend 在移动端中用户离开屏幕时发生的事件 <ul> <li v-for="(item, i) in Initials" :key="i" @touchstart="sstart(item)" @touchend="send(item)" @touchm
处理vue中的长按事件、点击事件、默认事件冲突
种一棵树最好的时间是十年前，其次是现在。
10-19 6597
vue并没有自带长按事件，我们是通过touchstart和touchend模拟长按，但是长按后又会触发默认事件，比如出现菜单，移动端会出现选择复制；但是如果直接阻止掉默认事件，click事件也会被阻止掉——无论是直接用@touchstart.prevent的方式阻止，还是在代码中通过event.preventDefault方式阻止；那么如何才能做到——既阻止默认事件，又正确触发click事件呢？利用touchstart是在click事件之前触发的特点，结合定时器来解决。
移动端触摸事件和点击事件重叠
yrrjiayou的博客
07-25 712
移动端触摸事件和点击事件重叠，给两个元素分别绑定触摸和点击事件，同时给某个元素绑定触摸事件和点击事件
字母点击滚动条跳转事件
WMMWYC的博客
12-12 1272
字母点击滚动条跳转事件（点击字母能跳到相应的位置，之后还能划回去，既能根据字母跳转，又能上下滑动）效果图如下： 当你点击索引条中的字母，比如D时，滚动条直接定位到D区，而且索引条位置不变。 下面，让我们来看看具体的实现方法吧！ 我的json数据大致设计如下：(小伙伴们可自行设计，功能能实现就好) { "success":"true", "status":0, "sc
ionic中的分类侧边栏ABC字母滑动特效
Wang的专栏
08-27 2648
在对之前项目进行回顾整理的过程中，发现自己做过挺有意思的特效，今天重新来梳理一下。首先要说明一下的是，一些特效都要依赖合理的布局和规范的数据和数据格式的支撑，今天整理的这个，不是很完美，还有很大提升的空间，不过作为开发参考，确实有一定的帮助。技术栈范围：ionic version 1，不管用的什么技术，实现思路都是想通的。效果预览github演示地址 https://github.com/johnn
touchstart事件和click事件分开执行
weixin_60020621的博客
05-09 706
插件用了@touchstart @touchmove @touchend事件，后来又加了点击相册，查看大图的功能。但@touchstart和@click一起用的话，只会执行@touchstart。然后发现@touchstart事件只是在点击时起到一个类似稍微放大的功能，告诉用户可以拖动图片。而且既能拖动换位，又能查看大图。最终，删除@touchstart， 使用@longpress继承@touchstart稍微放大的功能，并且在开头添加。uniapp项目中相册功能，要能拖动换位，所以用了插件。
touchstart与click同时触发
马优晨
06-25 9859
产生冲突的原因 我们可以给某个元素同时绑定 touchstart 和 click 事件，但这将会导致本篇文章解决的问题 – 这两个事件在移动设备上会发生冲突。 由于移动设备能够同时识别 touchstart 和 click 事件，因此当用户点击目标元素时，绑定在目标元素上的 touchstart 事件与 click 事件（约300ms后）会依次被触发，也就是说，我们所绑定的回调函数会被执行两次！。...
详解Vue3中的鼠标事件click和dblclick
热门推荐
一起学习
12-31 1万+
本文主要介绍Vue3中的常见鼠标事件。
vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题
maoyuanh的博客
02-15 4701
我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可。当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。
Vue中优化：防抖与节流解决性能问题
本文主要探讨在Vue应用中，特别是在使用Echarts时如何有效解决因频繁触发的事件导致的性能问题，重点聚焦于防抖（debounce）和节流（throttle）技术。当你在`window.onresize`事件回调中调用`echartsBox.resize()`，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

inticaler

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值