微信小程序 - 点击事件与长按事件共存且不冲突（用户可长按可点击）

已于 2024-07-29 15:11:17 修改
阅读量3.1k 收藏 6
点赞数 6
分类专栏： + Wechat 文章标签： 微信小程序 notepad++ 小程序
于 2020-08-24 08:52:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/108192379
版权
+ Wechat 专栏收录该内容
122 篇文章 1131 订阅 ¥19.90 ¥99.00
订阅专栏
本文介绍了如何在微信小程序中处理点击事件和长按事件，确保两者可以共存而不会相互干扰。通过控制手指触摸时间和阻止默认行为，实现了用户既能长按也能点击的交互体验。
摘要由CSDN通过智能技术生成

前言

对于同一控件同时设置 bindtap 和 bindlongtap ,会发现长按时先出现 bindlongtap 的事件，然后触发点击事件，显然这不是我们想要的。

支持 Vue2 / Vue3 语法，下面是个已实现功能的实例，请根据业务逻辑进行修改。

wxml

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
专栏目录
订阅专栏
微信小程序——同一控件的点击与长按事件共存的解决方案
不迁怒，不贰过。小知识，大智慧。
07-28 3023
方案一：使用bindtap和bindlongtap两个事件绑定不同的函数; 方案二：使用一个变量来判断事件类型.
小程序的长按事件和点击事件
weixin_30695195的博客
04-27 661
　　开发小程序的时间，碰见一个需求，就是一个图片，点击的时候，查看大图，长按的时候，出删除图片的模态，写了半天时间，终于是把需求完成了，下面就贴上代码，希望前端的同行小伙伴能用到，直接上代码： var int; Page({ /** * 页面的初始数据 */ data: { touchTime:0, moveIs: false, ...
微信小程序常用的事件
最新发布
qq_74472152的博客
06-28 1138
在微信小程序中，可以通过自定义事件来实现组件之间的通信，或者在页面中实现不同部分之间的交互。自定义事件可以通过触发，也可以通过bind和catch来监听和捕获自定义事件。以下是自定义事件的基本使用方法：1.触发自定义事件：在组件中使用方法触发自定义事件，可以传递参数给事件处理函数。// 在组件中触发自定义事件2.监听自定义事件：在组件或页面中使用bind来监听自定义事件，然后在对应的事件处理函数中处理逻辑。-- 在组件或页面中监听自定义事件 -->// 在组件或页面中定义自定义事件的处理函数。
小程序点击某一个触发两个点击事件
sky_sunshine_x的博客
10-02 6612
参考链接：https://blog.csdn.net/Anjinc/article/details/83903453 bindtap修改为catchtap即可
前端技术前沿9
程序员哆啦A梦，蓝胖子
05-24 1646
Node.js使用Module模块去划分不同的功能，以简化应用的开发。 var myModule = require('./myModule.js'); 将某些方法和变量暴露到模块外，可以使用exports对象去实现。 安装 Linux 下 Node.js的安装 sudo apt-get update sudo apt-get install node 或者： sudo aptitude ...
小程序一个模块上同时有两个点击事件时解决事件冒泡问题
x_Yanger的博客
11-07 1399
点击卡片部分要跳转到详情页，点击小星星要进行收藏。这种情况下如果收藏事件还用bindtap那么就会先进行收藏再跳转到详情页（点小星星不需要跳详情页）。所以我们就要阻止这种冒泡事件！ 把bindtap换成catchtap就可以了哦～ ...
微信小程序快速点击两个按钮会跳转两个页面
Xjiayi的博客
01-20 6748
在微信小程序里,当我们在同一个页面里,多个按钮都设置了页面路由的跳转的时候,快速点击不同按钮发现会多次跳转页面.目前想到的解决方法是
2019第一波福利--你再也不是小....小屏幕了
公众号：软小糖
02-15 1万+
  新年新气象--2019第一波福利--你再也不是小....小屏幕了       第一趣事--赏雪         要知道北国的冬天，不会没有雪，也不能没有雪。雪有时在人们的期盼中如约而至，有时在人们的意料之外忽然降临。南方的雪结晶小、落地易融化、透明，而新疆的雪不同于南方的雪，结晶大、厚重凝固。无风的清晨，雪花悠然自得地轻轻的飘、渐渐的下，思绪会随之舒展开来、飞扬着绵绵不...
AR耳机和智能手机界面的窗口管理设计与评价
引文：任杰，于春，翁月婷，周成驰，石元春窗口管理的设计与评价在AR耳机+智能手机界面中操作。虚拟现实智能硬件，2022，4（2）：115-131 DOI：10.1016/j.vrih.2021.12.002虚拟现实智能硬件2022年12月4日第2·文章·...
如何基于Redis Replication设计并实现Redis-replicator？
畅聊架构
11-28 781
本文整理自 Redis 技术交流群的线上分享活动，有对 Redis 技术感兴趣的朋友可以加群主微信 gnuhpc 加入。 文章主要内容围绕 Redis-replicator 的设计与实现，提纲如下： Redis-replicator 的设计动机 Redis-replicator 的设计与实现 Redis Replication 的协议简析 设计可插
微信小程序--实现多个按钮toggle功能
03-29
如下图所示，实现该按钮toggle功能。百度上很多都是只设置一个按钮的toggle，所以我现在来稍微总结下：多个按钮如何实现自身的toggle功能。原理：1，列表展示的时候，我们会用wx:for 来循环数据，那么我们就会得到相 ...       如下图所示，实现该按钮toggle功能。   百度上很多都是只设置一个按钮的toggle，所以我现在来稍微总结下：多个按钮如何实现自身的toggle功能。  原理：1，列表展示的时候，我们会用wx:for 来循环数据，那么我们就会得到相应的当前的第几个数据（即 wx:key="index"）  2.在每一个数据里面添加一个toggle的属性，togg
微信小程序tap点击和长按冲突解决
qq_23064501的博客
06-18 1678
// wxmlview bindtouchstart="bindTouchStart" bindtouchend="bindTouchEnd" bindlongtap="bingLongTap" bindtap="bindTap">view> // jsbindTouchStart: function(e) { this.startTime = e.timeStamp;}bindT
微信小程序长按和点击同时存在时，2个都会触发的问题
qq_37170740的博客
03-11 1196
问题描述： 在列表上实现长按弹框删除，点击进入详情页。在模拟器上正常，但在手机端，长按同时会触发点击。 长按、点击触发顺序： 点击：touchstart → touchend → tap 长按 touchstart → longtap → touchend → tap 点击和长按的差别：按住时间在350ms内算点击 最终代码： wxml： <view "bindlongtap="longclick" ...
微信小程序单击、双击、长按
想飞的猪的博客
01-07 856
wxml <view class="container"> <view class="btn" bindtap="tap" bindtouchstart="touchStart" bindtouchend="touchEnd"> 单击 </view> <view class="btn" bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
【微信小程序--双向绑定】
m0_56349322的博客
02-20 112
wxml中插入input标签， 绑定事件 bindinput js中接应绑定事件 handleInput 事件中的num：e 可以输出e的位置 通过控制台可以看出位置调用在e.detail.value 中 此时屏幕显示是input框中输入啥 view 标签中就会显示啥 然后添加连个button按钮 通过按钮来增加view中数字+1 和 -1 的算法 js事件源中对应接着handletap事件获取 此处输出e的值位置就是我们要获取的值 这样调取...
JS 移动端 点击长按事件冲突
豆。的博客
08-20 1730
要求效果： 1.点击跳转详情页。 2.长按显示遮罩层和删除按钮 添加长按事件 $(".product").on({ touchstart: function(e){ timeOutEvent = setTimeout(function(){ //此处为长按事件-----在此显示遮罩层及删除按钮 },500); }, t...
小程序将两个按钮并排放置在底部
种麦南山下的博客
04-22 8208
<view class="s_view"> <button class="saveBtn" >保存草稿</button> <button class="submitBtn" type="primary">提交</button> </view> 样式： .saveBtn { width: 50% !important; float:left; font-weight: 100; ...
微信小程序的事件大全
热门推荐
北海_南风
05-06 1万+
这里写目录标题bind与catch的区别----------------点击事件（单击）：bindtap双击事件长按事件：bindlongpress、bindlongtap长按与点击事件的执行顺序与关系----------------键盘输入事件：bindinput输入框聚焦：bindfocus输入框失焦：bindblurvault改变事件：bindchange---------------------触摸事件：触摸动作开始：bindtouchstart触摸动作结束：bindtouchend触摸过程移动：b
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

王佳斌

请作者喝杯咖啡 :)

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

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

打赏作者

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

抵扣说明：

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

余额充值