当前位置: 代码迷 >> 综合 >> 支付宝小程序点击事件冒泡处理
  详细解决方案

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

热度:79   发布时间:2024-03-08 09:47:57.0

开发者文档

事件类型

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

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

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

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

  • key 以 on 或 catch 开头,然后跟上事件的类型,如 onTapcatchTap

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

 

 

  相关解决方案