微信小程序 WXML事件 WXML冒泡事件列表
2018-11-09 本文已影响0人
Karaio
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。
