微信小程序 WXML事件 WXML冒泡事件列表

WXML事件分为 冒泡事件 和 非冒泡事件。

  • 冒泡事件:当一个事件被触发后,该事件会向父节点传递。
  • 非冒泡事件:不会向父节点传递。

WXML的冒泡事件列表:

类型 触发条件
touchstart 手指触摸
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断,如:来电、弹窗
touchend 手指触摸动作结束
tap 点击事件(手指触摸后离开)
longtap 长按事件(手指触摸后,超过350ms后离开)

注:bindtap 和 catchtap 两种事件绑定。bindtap不会阻止事件向上冒泡,catchtap会阻止事件冒泡。

事件对象的属性:
属性 类型 说明
type String 事件类型
timeTamp Integer 事件生产的时间戳
target Object 触发事件的组件的一些属性值集合
CurrentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息

针对以上代码示例

<view id='outter' bindtap='tap1'>
  Parent view
  <view id='middle' catchtap='tap2'>
    Sub view
    <view id='inner' bindtap='tap3'>
      Sun view
    </view>
  </view>
</view>
  • 冒泡分析:点击 Sun 触发 tap3 事件,因为 tap2 是通过catch 绑定的事件,阻止了事件继续向上传递,因此不能执行 tap1 事件,只有点击 Parent 才可以触发 tap1。

  • target分析:点击 Sun 时,tap3 收到的事件对象 target 和currentTarget 都是 Sun,而 tap2 收到的事件对象 target 是Sun,currentTarget 是 Sub。

注:<canvas /> 中的触摸事件属于特殊事件,不可冒泡,所以没有 currentTarget。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容