wxxcx文档笔记——框架/事件/事件的捕获阶段

Posted 2020-10-31 苡米阳光

事件的捕获阶段

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-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、handleTap4

　　capture排序完成后再比较冒泡阶段的顺序，而冒泡阶段是从子节点往外扩展，所以接下来的顺序是handleTap3、handleTap1。

 

如果将上面代码中的第一个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>