uni-app - 解决列表长按事件与点击事件冲突，完美解决@longpress长按触发事件与@click点击事件相互冲突的问题，uniapp长按事件和点击冲突

已于 2024-05-08 11:19:37 修改
阅读量5.9k 收藏 11
点赞数 8
分类专栏： + UniApp 文章标签： uni-app
于 2021-02-05 11:45:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/113687390
版权
+ UniApp 专栏收录该内容
142 篇文章 2263 订阅 ¥9.90 ¥99.00
订阅专栏

简介

网上大部分方法 滑动时都会触发长按事件，只适用于单个容器，不适合列表，且再多一个点击事件是无法实现的。

在 uniapp 全端兼容（h5网页 / 支付宝微信小程序 / 安卓苹果app / nvue 等全平台）解决长按事件与点击事件冲突问题，长按事件与点击事件同时触发怎么办？

支持 uniapp v2 / v3 版本，该示例可解决列表长按事件与点击事件冲突问题，并且滑动时不会触发长按事件，且容器内可以再套一个点击事件。

在这里插入图片描述

实现代码

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
uniapp解决长按事件与点击事件冲突问题
残阳曦月
04-21 678
直接贴代码Demo,粘贴到页面直接可以测,按需求 写入方法即可
在uniapp中实现长按事件（屏蔽点击事件）
热门推荐
snow_love_beer的博客
04-24 2万+
在uniapp中实现长按事件（屏蔽点击事件） 问题 在uniapp使用官方提供的长按点击事件时会触发点击事件 <view @longpress="longpress"> <text>点击我</text> </view> longpress() { console.log("长按事件"); }, 这样使用在元素上只绑定了长按事件时没有任何问题，但如果元素上同时绑定的单击事件就无法区分 解决 原理 点击事件在点击结束后才会触发。 长按事件
uniapp开发踩坑，easycom组件冲突，运行真机报错Cannot read property ‘meta‘ of undefined等解决方法
最新发布
qq_16785561的博客
06-18 563
uniapp从官方插件市场导入插件使用的是asycom自动导入，导入到已有项目中会出现组件冲突的问题，比如原项目中根目录下/components中有uni-popup组件，又通过插件市场导入了uni-popup组件，导入的组件会在根目录下/uni_modules中，就会出现上述错误。/components文件夹中的组件可能是很老的版本，新的组件方法和功能没有，例如uni-popup老版本中只有@change事件，没有@maskClick事件。（推荐第①种方法，毕竟现在大多数组件直接冲插件市场导入）
使用 uni-app 开发app时 中使用的 @longpress 含义及使用方法
YHLSunshine的博客
09-06 4240
使用 uni-app 开发app时 中使用的 @longpress 含义及使用方法
Uniapp长按事件自定义长按时间、避免触发点击事件
LFQP_的博客
05-12 4667
Uniapp长按事件自定义长按时间、避免触发点击事件
uniapp长按事件，长按删除
奥特蛋的博客
04-17 1万+
uniapp 1.uniapp中长按事件，长按删除 longtap template部分 <view @longtap="onLongPress(item.commentId)" //绑定长按事件，传入所选ID ... </view> script部分 k // 长按删除 onLongPress(e) { uni.showModal({ // 弹框询问是否进行下一步事件 title: '提示', content: '是否删除该评论
uniapp通过监听longpress、touch事件完成长按录音、滑动取消效果
花儿为何这样红
09-25 6707
最近有一个自己的项目需要让用户能够长按录音，看了一下uniapp的插件市场没有合适的插件可以直接用，干脆自己写一个。
uni-app:从运行原理上面解决性能优化问题
01-27
本文将探讨uni-app的运行原理，以及如何从这些原理出发解决性能优化问题。 首先，uni-app的运行机制涉及到逻辑层和视图层的分离。逻辑层负责业务逻辑和数据管理，而视图层则处理页面的渲染。在非H5端，逻辑层与视...
uni-app app实现web-view H5图片长按下载
02-28
这里我们将详细探讨如何利用mui库，特别是`mui.min.js`，来解决uni-app中H5图片长按下载的问题。 首先，`mui.min.js`是mui框架的一个轻量级库，它提供了许多增强原生移动Web App体验的组件和方法。在这个场景下，...
Uni-App模块化开发的组件封装
12-31
2. 事件修饰符： Uni-App支持Vue的事件修饰符，如`.stop`阻止事件冒泡，`.prevent`阻止默认行为，`.once`只触发一次等，这些修饰符可以帮助我们更好地控制事件行为。 3. 事件总线：当组件间没有父子关系时，可以...
基于Uni-app+Node.js音乐听歌系统的设计与实现
06-06
技术需求：前端采用Uni-app框架，框架语法为Vue + 小程序，基于组件、路由、状态管理、MVVM响应式数据等；后端采用Express + CSRF完成数据接口开发等。系统设计目标：可以方便的浏览音乐排行榜、搜索指定音乐；轻松...
uni app @click 传递参数及获取到事件对象
wusejiege6的博客
11-07 1万+
v-on:click 等价于 @click $event 等于自己 1、点击事件方法不带参数，此时默认就带 $event参数(事件对象) @click=“goToPage” 等价于 @click=“goToPage($event)” methods{ goToPage(e){ console.log(e)//此时e打印出来是事件对象 } } 2、带参数，事件对象就没了 @click=“goToPage(12)” methods{ goToPage(e){ conso..
uniapp中的触摸事件----长按删除，点击修改功能实现(记录)
Amily8512的博客
11-08 1601
uniapp中的触摸事件----长按删除，点击修改功能实现(记录)
【uni-app】长按事件
loyd3的博客
04-27 7209
<view @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend" > </view> handletouchstart(e) { this.timeOutEvent = setTimeout(() => { this.onLongPress(
uniapp 点击，长按，触摸，结束触摸事件
beishang_1的博客
03-20 974
【代码】uniapp 点击，长按，触摸，结束触摸事件。
uni-app - 手机端实现用户长按文本提示选取复制功能
王佳斌
03-10 1万+
手机端实现用户长按文本提示选取复制功能 需求：用户手指长按文本区域，弹出手机系统复制功能。 有时，安卓或苹果用户会有复制文本的需求，但是 uni-app 编译后组件是 无法长按选取复制的。 实现 最简单的方式，就是将 <text> 标签 selectable 属性设置为 true，演示如下： <text selectable="true">这是一个可以长按选择文本，弹出复制的text标签</tex...
uni-app之@longpress长按获取不到坐标
qq_44707265的博客
05-02 3152
在uni-app项目中开发nvue项目时 长按组件返回的信息都是0，官方没有给出说明，我们要将需要点击的组件替换成div，不能使用view。 他兼容我么我们的小程序和App端的，一个原生的组件。就可以获取到我们的长按坐标了。 但是div标签不能使用hover-class ...
uniapp长按事件
m0_58361435的博客
09-22 571
【代码】uniapp长按事件。
uni-app点击事件@click加了v-if不生效
05-26
如果您在 `click` 事件中添加了 `v-if`，那么当您点击该元素时，`v-if` 已经被计算为 `false`，因此该元素将不会被渲染。因此，您需要使用 `v-show` 或 `v-if` 和 `v-else` 来实现您的需求。 `v-show` 可以隐藏元素，但不会从 DOM 中删除，而 `v-if` 可以完全删除元素。 例如，您可以这样实现： ```html <template> <div> <button @click="show = !show">Toggle</button> <div v-show="show"> This will show/hide when button is clicked </div> </div> </template> <script> export default { data() { return { show: false, }; }, }; </script> ``` 或者这样： ```html <template> <div> <button @click="show = !show">Toggle</button> <div v-if="show"> This will show/hide when button is clicked </div> <div v-else> This will show/hide when button is clicked (else) </div> </div> </template> <script> export default { data() { return { show: false, }; }, }; </script> ``` 请注意，`v-show` 与 `v-if` 的使用不同，因此您需要根据您的具体需求选择适合您的选项。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

王佳斌

请作者喝杯咖啡 :)

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

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

打赏作者

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

抵扣说明：

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

余额充值