小程序中的冒泡事件与捕获事件

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

如在下边这个例子中,点击 inner view 会先后调用handleTap3handleTap2(因为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>

事件的捕获:

capture-bind开头的事件,可以实现捕获事件。

注意:小程序官方文档的例子是capture-bind:touchstart, 这个操作是手指触摸动作开始,在有滑动效果的地方,会与滑动事件引起冲突。

对于capture-bind:tap 才是我们经常使用的点击事件。

具体要使用的事件可以看下图。都是以capture-bind开头就可以实现


当然:这个具体的一些使用建议参看小程序的官方文档。



posted @ 2018-04-27 18:47  邱小健  阅读(277)  评论(0编辑  收藏  举报