微信小程序--长按事件bindlongtap与点击事件bindtap的冲突

最新推荐文章于 2024-09-29 10:24:06 发布

原创

最新推荐文章于 2024-09-29 10:24:06 发布 · 1.7w 阅读

收录于

当前文章被以下社区和专栏收录：

对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件，然后触发点击事件。

通过测试，我们发现，小程序中事件执行的顺序是
点击：touchstart → touchend → tap
长按 touchstart → longtap → touchend → tap

处理方法：

// wxml
<view bindtouchstart="bindTouchStart" bindtouchend="bindTouchEnd" bindlongtap="bingLongTap" bindtap="bindTap">蹂躏我</view>

// js
bindTouchStart: function

标签

#微信 #微信小程序

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RubyCat-Max

关注关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序——同一控件的点击与长按事件共存的解决方案

不迁怒，不贰过。小知识，大智慧。

07-28

3472

方案一：使用bindtap和bindlongtap两个事件绑定不同的函数; 方案二：使用一个变量来判断事件类型.

5 条评论您还未登录，请先登录后发表或查看评论

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

🏆 前端领域优质创作者

08-24

3840

前言对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件，然后触发点击事件，显然这不是我们想要的。下面是个已实现功能的实例，请根据业务逻辑进行修改。 wxml  <button bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindlongpress="handleLongPress"

【微信小程序】解决点击(bindtap)和长按(bindlongtap)冲突

韩旭不会敲代码吧的博客

01-30

3345

解决点击(bindtap)和长按(bindlongtap)冲突

微信小程序 - 点击事件与长按事件共存且不冲突，解决同一控件的点击与长按事件共存的解决方案，微信小程序如何实现一个按钮上既要支持点击事件也要支持长按事件（用户可长按可点击）

最新发布

🏆 前端领域优质创作者

09-29

1742

微信小程序，vue2，vue3，微信小程序实现同时单击、双击、长按小程序长按多次点击怎么写，微信小程序touchstart影响tap的解决方法，微信小程序‘长按’事件触发‘点击’事件的解决方法_长按后点击，长按事件bindlongtap与点击事件bindtap的执行顺序，小程序点击某一个触发两个点击事件，微信小程序长按与点击事件冲突解决方案，微信小程序--长按事件bindlongtap与点击事件bindtap的冲突，长按与点击事件冲突，微信小程序长按事件触发点击事件的BUG之一。

小程序长按事件

T追梦人的博客

01-21

4677

小程序长按事件

微信小程序，长按事件bindlongtap与点击事件bindtap的冲突

纠缠AI的亮子

11-25

2968

对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件，然后触发点击事件。 小程序中事件执行的顺序是点击：touchstart → touchend → tap 长按 touchstart → longtap → touchend → tap 为了解决这个冲突，在没有选择的动作下，才会出发 tap 事件：定义一个变脸 longtap = 0...

长按事件bindlongtap与点击事件bindtap的冲突两种方案

weixin_44413364的博客

11-25

1206

第一种计算时间当我们在一个标签上同时设置bindtap和bindlongtap时, 会发现长按时先出现bindlongtap的事件，然后紧接着也会触发点击事件。显然，大部分时候，这并不是我们想要的事件执行结果。我们知道，微信小程序中事件执行的顺序是点击：touchstart → touchend → tap 长按 touchstart → longtap → touchend → tap 解决方法：通过点击事件来判定是点击还是长按。 bindTouchStart: function(e) {

小程序踩坑记——长按与点击事件冲突

dengla6847的博客

01-08

349

对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件，然后触发点击事件。通过测试，我们发现，小程序中事件执行的顺序是点击：touchstart → touchend → tap 长按 touchstart → longtap → touchend → tap 处理方法： // wxml <view bindtou...

小程序单击、长按事件的冲突

flowRight的博客

08-02

1996

购物车列表商品长按可删除，单击可进去商品详情、所以要处理单击、长按事件的冲突。代码如下 <view bindtap='goDetail' bindtouchstart='bindTouchStart' bindtouchend='bindTouchEnd' bindlongtap='longTap' data-id='{{item.itemId}}' > longTap: fun...

微信小程序长按与点击事件冲突解决方案

戴翔的技术博客

12-08

2012

问题再现对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件，然后触发点击事件。通过测试，我们发现，小程序中事件执行的顺序是点击：touchstart → touchend → tap 长按 touchstart → longtap → touchend → tap 解决方案 abc.wxml <view bindtouchstart="bindTouchStart" bindtouchend="bindTouchEnd" bindlongt

小程序长按事件和点击事件冲突

Ming-code

01-07

1320

微信小程序之解决同时绑定bindtap和bindlongtap事件bug

笙

09-10

6536

问题描述：一个元素上同时绑定了点击事件与长按事件时，当长按事件触发时，点击事件也会被触发解决办法：记录手指点下与手指抬起之间的时间差在触发tap事件前判断时间差小于350 就触发tap 否则不处理代码： <button bindtouchstart="handleTouchStart" bindtouchend="handleTouc...

微信小程序长按与单击事件触发

ai_xy的博客

06-10

5671

支持`longpress`事件，手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 `longtap`事件，但在触发时会同时触发单击事件，需配合`touchstart`和`touchend`事件计算触屏开始和结束时间来使用...

微信小程序的点击、双击、长按事件

热门推荐

qq_40477864的博客

04-09

2万+

一、点击事件 点击事件是最常用的事件，轻点即可触发事件，如果想要添加参数即可通过 data-加事件名的方式添加参数，通过 event参数的target.dataset.加事件名获取。我们来看看样例： wxml代码： <view class='container'> <button bindtap='test' data-name='tap'>bindtap...

表单提交方式

qq_61594973的博客

10-08

224

微信小程序中有很多种事件，其中包括：touchstart、touchmove、touchend、touchcancel、tap、longtap等。这些事件可以用于监听用户的手指触摸动作，以及手指触摸后的移动、结束等操作。此外，还有一些特殊的事件，如提交表单事件（bindsubmit）、重置表单事件（bindreset）等。bindtap和bindchange都是微信小程序中的事件，用于绑定点击或输入框改变等事件。其中，bindtap是手动触发的事件，而bindchange是自动触发的事件。

微信小程序“长按”事件触发“点击”事件最简单解决方案

LifeZealot的博客

12-17

1168

【代码】微信小程序“长按”事件触发“点击”事件最简单解决方案。

【小程序教程】微信小程序之事件绑定

10-12

4420

微信小程序的事件绑定是非常重要的一部分，它可以让我们的小程序与用户进行交互，实现各种功能，例如点击按钮、滑动页面、输入内容等等。通过本篇博文的介绍，我们了解了微信小程序事件绑定的基本语法和常用的事件类型，学会了如何编写事件处理函数、以及传参和阻止冒泡的方法。在微信小程序中，通过在标签上绑定事件，当用户进行某种操作时，该事件就会被触发，从而执行相应的代码逻辑。在事件绑定中，我们需要定义对应的事件处理函数，当事件被触发时，该函数就会执行。，可以用来获取事件的相关信息，例如。在上面的代码中，当用户点击。

【微信小程序开发】小程序的事件处理和交互逻辑（最详细）

陈橘又青的博客

10-25

2万+

在微信小程序中，常见的事件类型包括点击事件（tap）、长按事件（longpress）、滑动事件（touchmove）、输入事件（input）、表单提交事件（submit）等。例如，当我们希望在触发事件的元素之前捕获事件，可以通过在组件上使用 capture-bind 或 capture-catch 属性来绑定事件。在上述代码中，当点击子元素时，子元素的事件处理函数会被触发，但父元素的事件处理函数不会被触发，因为我们调用了 event.stopPropagation() 方法阻止了事件的冒泡。