事件的捕获阶段
自基础库版本 1.5.0 起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bind
、capture-catch
关键字,后者将中断捕获阶段和取消冒泡阶段。
在下面的代码中,点击 inner view 会先后调用handleTap2
、handleTap4
、handleTap3
、handleTap1
。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2"> outer view <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> inner view </view> </view>
调用顺序分析:
捕获阶段位于冒泡阶段之前,所以先看capture-bind
、capture-catch
关键字,而捕获阶段又是从父节点往里走,所以顺序为handleTap2
、handleTap4
capture排序完成后再比较冒泡阶段的顺序,而冒泡阶段是从子节点往外扩展,所以接下来的顺序是handleTap3
、handleTap1。
如果将上面代码中的第一个capture-bind
改为capture-catch
,将只触发handleTap2
。
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2"> outer view <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> inner view </view> </view>
原文地址:https://www.cnblogs.com/yourself/p/8832126.html
时间: 2024-10-09 23:20:39