事件类型
事件分为冒泡事件和非冒泡事件:
-
冒泡事件:以关键字
on
为前缀,当组件上的事件被触发,该事件会向父节点传递。 -
非冒泡事件:以关键字
catch
为前缀,当组件上的事件被触发,该事件不会向父节点传递。
事件绑定的写法同组件的属性,以 key、value 的形式。
-
key 以
on
或catch
开头,然后跟上事件的类型,如onTap
、catchTap
。 -
value 是一个字符串,对应 Page 中定义的函数名,不存在时触发事件会报错。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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 前缀的非冒泡事件来阻止事件冒泡,请参见 非冒泡事件。