微信小程序从入门到放弃二十九：深入解析冒泡事件bindtap和catchtap的对比分析

摘要：
在微信小程序开发过程中，bindtap事件具有冒泡特性，若未进行有效拦截，将导致事件持续传递至最顶层。在特定场景下，单次用户点击可能引发多个事件的触发。为避免此类问题，采用catchtap方法可有效实现事件拦截。针对需要展示全屏半透明背景的弹出层设计，可通过引入catchtouchmove机制来防止页面滚动时出现穿透现象。

微信小程序从入坑到放弃二十九：一个小场景搞懂冒泡事件bindtap和catchtap的区别

• • 一、起因

    • 二、相关知识点

    • 三、实战代码

    • • 3.1、项目文件列表
      • 3.2、/index/index.wxml 中的代码
      • 3.3、/index/index.js 中的源码
      • 3.4、为何选择使用catchtap而非bindtap？
      • 3.5、页面滑动时也需进行处理

    • 四、demo源码

一、起因

昨日午后，一名已有半年未曾联系的微信好友突然发送信息，向我咨询相关问题。具体情况如下图所示：

在进一步沟通之后，明确