微信小程序长按事件触发点击事件的BUG处理

zone 发布于2019-08-20 17:40 / 813人阅读

摘要：微信小程序开发说实话还是有点糟心的，经过事件冒泡的坑之后，又遇到了长按事件必触发点击事件的实例代码长按我触发了触发了效果解决方法后确定是小程序有意为之后，看了一下网上的解决方法，基本都是通过和重新判定和事件的，个人不是很喜欢。

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

实例代码

wxml

Page({
  data: {
  },
  tap: function() {
    console.log("触发了 tap")
  },
  longtap: function () {
    console.log("触发了 longtap")
  }
})

效果

解决方法

Google后确定是小程序有意(B)为(U)之(G)后，看了一下网上的解决方法，基本都是通过touchstart和touchend重新判定tap和longtap事件的，个人不是很喜欢。

看一下微信小程序的事件定义：

tap, 手指触摸后马上离开

longtap, 手指触摸后，超过350ms再离开

也就是说，目前的触发的顺序是 longtap -> touchend -> tap

那么其实解决也很清晰了，简单来说就是 加把锁, 应用到上面的代码上：

Page({
  data: {
    lock: false
  },
  tap: function() {
    //检查锁
    if (this.data.lock) {
      return;
    }
    console.log("触发了 tap")
  },
  touchend: function() {
    if (this.data.lock) {
      //开锁
      setTimeout(() => {
        this.setData({ lock: false });
      }, 100);
    }
  },
  longtap: function () {
    //锁住
    this.setData({lock: true});
    console.log("触发了 longtap")
  }
})

看一下效果

延伸

大部分情况下，我们都是不需要在touchend中加锁的，因为长按操作会触发其他的异步操作，只要保证异步操作的最后把锁解除了即可。

GPU云服务器云服务器事件处理程序 js事件处理程序 html的点击事件吧html的点击事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83770.html

微信小程序开发中的二三事之网易云信IMSDK DEMO

摘要：传统的网页编程采用的三剑客来实现，在微信小程序中同样有三剑客。观察者模式不难实现，重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型，微信小程序中自然也有。本文由作者邹永胜授权网易云社区发布。简介为了更好的展示我们即时通讯SDK强悍的能力，网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 评论0 收藏0
微信小程序教学第四章第三节（含视频）：小程序中级实战教程：详情-功能完善

摘要：详情功能完善本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们把详情的其他功能完善起来下一篇分享返回列表。详情 - 功能完善本文配套视频地址：https://v.qq.com/x/page/f0555... 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具这一节中，我们把详情的其他功能完善起来：下一篇、分享、返回列表。 Step 1....

phodal 2019-08-21 17:25 评论0 收藏0
微信小程序教学第四章第三节（含视频）：小程序中级实战教程：详情-功能完善

摘要：详情功能完善本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们把详情的其他功能完善起来下一篇分享返回列表。详情 - 功能完善本文配套视频地址：https://v.qq.com/x/page/f0555... 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具这一节中，我们把详情的其他功能完善起来：下一篇、分享、返回列表。 Step 1....

cocopeak 2019-08-01 17:55 评论0 收藏0
微信小程序教学第四章第三节（含视频）：小程序中级实战教程：详情-功能完善

摘要：详情功能完善本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们把详情的其他功能完善起来下一篇分享返回列表。详情 - 功能完善本文配套视频地址：https://v.qq.com/x/page/f0555... 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具这一节中，我们把详情的其他功能完善起来：下一篇、分享、返回列表。 Step 1....

fizz 2019-08-29 13:44 评论0 收藏0
微信小程序 — 速学速查笔记

摘要：配置配置全解析项目配置文件文件描述项目配置文件项目代码配置是否检查域名安全性和版本是否将项目的代码转成是否自动补全兼容前缀是否压缩代码是否启用新功能编译方式版本号项目名项目配置搜索关键字客服编译方式小程序配置项目路由设置第一项为首页窗 1. 配置配置全解析 project.config.json ( 项目配置文件 ) { // 文件描述 description: 项目...

baukh789 2019-08-30 14:02 评论0 收藏0