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

摘要：
在微信小程序中，bindtap事件会产生冒泡，若不加以拦截，会一直冒泡到顶端。在某些情况下，一次点击会触发若干点击事件。为了防止冒泡，使用catchtap即可解决问题。在有全屏半透明背景的弹出层效果中，可以使用catchtouchmove来阻止页面滚动发生穿透。

一、起因

昨天下午，微信上一个近半年未联系的好友突然发消息问我问题。如图：
近一步沟通过后，了解了她的需求。大白话就是：点击非红框框区域时隐藏这个框框。

二、相关知识点

她的这个需求实际上跟弹出层差不多，点击非操作区域时都隐藏功能。这里有两个知识点：

1. 事件冒泡；
2. 页面滚动穿透（遮罩层背景时用到，此处顺带提一笔）。
   在微信小程序项目开发中，事件冒泡是家常便饭，也略有小坑。废话不多说，直接上代码。

三、实战代码

为了更直观的复现问题，暂时不封装组件，直接在/index/index.wxml页面中写代码。

3.1、项目文件列表

• 微信小程序项目根目录
  • index /* 项目首页 */
    • index.wxml /* 模板页 */
    • index.js /* js */
    • index.wxss /* 样式文件 */
    • index.json /* 配置文件 */
  • … /* 其他文件 */

3.2、/index/index.wxml 中的代码

<view class="page" catchtap="handleCatchTap" bindtouchmove="handleTouchmove">
  <view class="page-content">页面内容区</view>
  <view class="pinglun-info">
    <view class="pinglun__time">23小时前<view class="pinglun__delete">删除</view>
  </view>
    <view class="pinglun-tool" catchtap="handleShowPingLun">
      <view class="pinglun-button">...</view>
      <view class