小程序之冒泡事件，catch与bind区别

最新推荐文章于 2025-06-10 15:08:44 发布

wpn1lgl

最新推荐文章于 2025-06-10 15:08:44 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web explore 文章标签：小程序事件 catch bind

本文链接：https://blog.youkuaiyun.com/wpn1lgl/article/details/90714729

web explore 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了小程序中冒泡事件的概念，以tap事件为例，详细解释了bindtap和catchtap的区别。bindtap仅检测事件，而catchtap不仅能检测还阻止事件冒泡。事件响应实际发生在冒泡过程中，捕获阶段（capture-bind或capture-catch）先于冒泡阶段，并且一旦使用catch，后续冒泡将被中止。文中提供了官方示例以辅助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所谓的冒泡事件就是事件触发后会一层一层向上传递，使所有的包含其子元素的父级元素都触发该事件。而哪些事件属于冒泡事件是由微信官方所定义好的，列表如下

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

现在就拿tap为例，tap如列表所示，是一个冒泡事件，那么bindtap和catchtap的区别是什么呢？

想要理解区别，首先从bind和catch本身的中文含义理解比较简单，bind就是绑定的意思,catch就是抓获的意思。所以bindtap只是会检测组件有没有触发tap，而catchtap不仅会检测tap，而且还会抓获tap，使其不会继续向上冒泡。

说到底，bindtap和catchtap并非是在用户按下按钮的那一霎那响应，而是在冒泡的过程中响应的，真正在抓获用户按下去那一霎那响应其实是要写成capture-bind:或是capture-catch:，抓获阶段在冒泡阶段的前面，同理，若在抓获阶段使用了catch则后面的过程都会中止。

附上官方的例子：

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>