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

news2024/11/18 9:40:48

在这里插入图片描述

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序学习分享
✨特色专栏：国学周更-心性养成之路
🥭本文内容：微信小程序——实现手机振动效果

文章目录

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

前言

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

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

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

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

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

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

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，然后在事件处理函数中使用一个变量来判断触发的是点击还是长按事件。例如：

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

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

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