小程序事件传递

最新推荐文章于 2024-09-16 15:08:31 发布

转载最新推荐文章于 2024-09-16 15:08:31 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yang-shuai/p/8072420.html

本文深入解析小程序中的事件绑定机制，区分bind与catch事件的区别。bind事件允许事件冒泡，而catch事件则阻止事件向上冒泡。通过具体示例，详细说明了如何在不同层级的视图组件中使用这两种事件绑定方式。

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

想要点击事件只响应自己，使用catchtap事件

想要点击事件可以传递父组件，使用bindtap事件

1、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

2、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>