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

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。

🍎个人主页：Java Fans的博客

🍊个人信条：不迁怒，不贰过。小知识，大智慧。

💞当前专栏：微信小程序学习分享

✨特色专栏：国学周更-心性养成之路

🥭本文内容：微信小程序------实现手机振动效果

文章目录

前言

对于同一个控件，我们有时候需要实现两种事件效果，比如一个控件的点击事件与长按事件，我们通过一个按钮去实现，下面提供两种解决方案，供博友们学习使用。

方案一：使用bindtap和bindlongtap两个事件绑定不同的函数

使用bindtap和bindlongtap两个事件绑定不同的函数：可以在控件上同时绑定bindtap和bindlongtap两个事件，分别对应点击和长按事件。

但是对于同一控件同时设置 bindtap 和 bindlongtap ,会发现长按时先出现 bindlongtap 的事件，然后触发点击事件，显然这不是我们想要的。所以我这边将方法进行了修改，例如：

html 复制代码

//需要触发的组件
<view bindtouchstart="onTouchStart" bindtouchend="onTouchEnd" bindlongpress="onLongPress" bindtap="onClick">点击或长按</view>

在对应的Page或Component的js文件中，定义onTap和onLongTap两个函数处理点击和长按事件：

javascript 复制代码

Page({ 
  data: { },
  /* * 事件处理 */
  // 点击事件
  onClick: function(e) { 
    //如果长按时间小于350则证明是用户进行点击
    if (this.endTime - this.startTime < 350) { 
      console.log("点击");
    }
  },
  // 长按事件
  onLongPress: function(e) { 
    console.log("长按");
  },
  // 手指触摸开始(不会触发)
  // 请勿删除代码
  onTouchStart: function(e) { 
    this.startTime = e.timeStamp;
  },
  // 手指触摸结束(不会触发)
  // 请勿删除代码
  onTouchEnd: function(e) { 
    this.endTime = e.timeStamp;
  },
})

方案二：使用一个变量来判断事件类型

可以在控件上只绑定一个事件，例如bindtap，然后在事件处理函数中使用一个变量来判断触发的是点击还是长按事件。例如：

html 复制代码

<view bindtap="onTapLongTap">点击或长按</view>

在对应的Page或Component的js文件中，定义onTapLongTap函数，使用event.type属性来判断事件类型，决定执行点击或长按的逻辑：

javascript 复制代码

Page({
  onTapLongTap: function(event) {
    if (event.type === 'tap') {
      // 点击事件处理逻辑
      console.log('点击事件');
    } else if (event.type === 'longpress') {
      // 长按事件处理逻辑
      console.log('长按事件');
    }
  }
})

这两种方式都可以实现同一控件的点击与长按事件共存。根据项目需求，选择适合的方式进行处理。

码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更---心性养成之路》，学习技术的同时，我们也注重了心性的养成。