支付宝小程序点击事件冒泡处理

开发者文档

事件类型

事件分为冒泡事件和非冒泡事件：

• 冒泡事件：以关键字 on 为前缀，当组件上的事件被触发，该事件会向父节点传递。

• 非冒泡事件：以关键字 catch 为前缀，当组件上的事件被触发，该事件不会向父节点传递。

事件绑定的写法同组件的属性，以 key、value 的形式。

• key 以 on 或 catch 开头，然后跟上事件的类型，如 onTap、catchTap。

• value 是一个字符串，对应 Page 中定义的函数名，不存在时触发事件会报错。

<view id="outter" onTap="handleTap1">
  view1
  <view id="middle" catchTap="handleTap2">
    view2
    <view id="inner" onTap="handleTap3">
      view3
    </view>
  </view>
</view>

 

上面代码中，点击 view3 会先后触发 handleTap3 和 handleTap2（因为 tap 事件会冒泡到 view2，而 view2 阻止了 tap 事件冒泡，不再向父节点传递），点击 view2 会触发 handleTap2，点击 view1 会触发 handleTap1。

所有会发生冒泡的事件：

类型	触发条件
touchStart	触摸动作开始
touchMove	触摸后移动
touchEnd	触摸动作结束
touchCancel	触摸动作被打断，如来电提醒，弹窗
tap	触摸后马上离开
longTap	触摸后，超过 500ms 再离开