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

Bertha 。 2023-06-16 08:11 48阅读 0赞

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

小程序中事件执行的顺序是

点击：touchstart → touchend → tap  
长按 touchstart → longtap → touchend → tap

为了解决这个冲突，在没有选择的动作下，才会出发 tap 事件：

*  定义一个变脸 longtap = 0
 *  在 longtap 事件中，赋值 longtap = 1
 *  在 tap 事件中，如果 longtap 的值是 0，则正常处理
 *  在 tap 事件中，如果 longtap 的值是 1，则赋值 longtap = 2
 *  在 tap 事件中，如果 longtap 的值是 2，则赋值 longtap = 0

## 代码 ##

wxml

bindlongtap="chunkLongTap" bindtap="gotoChunk"

js

let longTap = 0 // 0 not
                    // 1 long tap
                    // 2 tap (follows the long tap in a same action)
                    
      chunkLongTap (ev)
      {
        longTap = 1
      },
    
    
      gotoChunk (ev)
      {
        const ckid = ev.currentTarget.dataset.ckid
        if (ckid && this.data.theChapter.switch === 'on') {
          if (longTap === 0) {
            wx.navigateTo({
              url: `/pages/book_chunk/chunk?ckid=${ckid}`,
            })
          }
          else if (longTap === 1) {
            longTap = 2
          }
          else if (longTap === 2) {
            longTap = 0
          }
        }
      },

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

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

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

浅浅的花香味﹌/ 2024年04月29日 19:15/ 0 赞/ 108 阅读

相关微信小程序长按事件触发点击事件的BUG之一

微信小程序开发说实话还是有点糟心的，经过事件冒泡的坑之后，又遇到了长按事件(longtap)必触发点击事件(tap)的BUG 实例代码 wxml <vi

深碍√TFBOYSˉ_/ 2023年07月17日 06:06/ 0 赞/ 113 阅读

相关微信小程序-bindtap事件点击改变样式

uu 方式一：采用三目运算数据绑定方式改变样式  <view class="middle"> <view

系统管理员/ 2023年07月17日 02:55/ 0 赞/ 108 阅读

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

对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件，然后触发点击事件。小程序中事件执行的顺序是点击：touchs

Bertha 。/ 2023年06月16日 08:11/ 0 赞/ 49 阅读

相关微信小程序 bindtap与catchtap的事件使用和区别

1、什么是事件 (1) 事件是视图层到逻辑层的通讯方式。　　(2) 事件可以将用户的行为反馈到逻辑层进行处理。　　(3) 事件可以绑定在组件上，当达

一时失言乱红尘/ 2023年02月13日 05:54/ 0 赞/ 99 阅读

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

前言 > 对于同一控件同时设置 `bindtap` 和 `bindlongtap` ,会发现长按时先出现 `bindlongtap` 的事件，然后触发点击事件，显然这不是

缺乏、安全感/ 2022年11月30日 05:55/ 0 赞/ 425 阅读

相关 uni-app - 解决列表长按事件与点击事件冲突

效果图 ![在这里插入图片描述][2021020511420898.gif] 简介 > 网上大部分方法滑动时都会触发长按事件，只适用于单个容器，不适合列表，且再

柔光的暖阳◎/ 2022年10月28日 03:48/ 0 赞/ 458 阅读

相关微信小程序--鼠标事件 & 点击事件返回值的target分析

[小程序][Link 1]鼠标事件" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-

冷不防/ 2022年06月11日 08:19/ 0 赞/ 855 阅读

相关微信小程序如何实现js点击事件

坑啊 -------------------- 我一直做的是html的网站或者是手机app js点击事件都是 οnclick="事件名（）" --------

川长思鸟来/ 2022年04月24日 12:12/ 0 赞/ 922 阅读

相关微信小程序-bindtap等事件传参

什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

爱被打了一巴掌/ 2022年04月12日 13:48/ 0 赞/ 475 阅读