小程序 event 事件系统

Question

一、 bindtap 事件绑定

<view id="inner" bindtap="handleTap3">
  inner view
</view>

二、 catchtap 事件绑定并阻止事件冒泡

点击 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>

三、 mut-bind 互斥事件绑定

一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。

例如在下边这个例子中，点击 inner view 会先后调用 handleTap3 和 handleTap2 ，点击 middle view 会调用 handleTap2 和 handleTap1 。

<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

四、 capture-bind 和 capture-catch 事件捕获

触摸类事件支持捕获阶段。

需要在捕获阶段监听事件时，可以采用 capture-bind 、 capture-catch 关键字，后者将中断捕获阶段和取消冒泡阶段。

1、在下面的代码中，点击 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>

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