小程序冒泡解决

事件类型

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

• 冒泡事件：以关键字 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>

 

 

<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再离开

 

 

常见问题

Q：大 box 的事件覆盖了小 box 的事件，点击小 box 也执行了大 box 的事件怎么解决？

A：推荐使用关键字为 catch 前缀的非冒泡事件来阻止事件冒泡，请参见 非冒泡事件。

 

官方摘抄：https://opendocs.alipay.com/mini/framework/events