【愚公系列】2022年08月 微信小程序-view冒泡事件详解
文章目录
前言
微信小程序事件主要分为冒泡事件和非冒泡事件：
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
WXML的冒泡事件列表：
类型 | 触发条件 | 最低版本 |
|---|---|---|
touchstart | 手指触摸动作开始 | |
touchmove | 手指触摸后移动 | |
touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 | |
touchend | 手指触摸动作结束 | |
tap | 手指触摸后马上离开 | |
longpress | 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 | 1.5.0 |
longtap | 手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替） | |
transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 | |
animationstart | 会在一个 WXSS animation 动画开始时触发 | |
animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 | |
animationend | 会在一个 WXSS animation 动画完成时触发 | |
touchforcechange | 在支持 3D Touch 的 iPhone 设备，重按时会触发 | 1.9.90 |
一、hover-class
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
hover-class | string | none | 否 | 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果 | 1.0.0 |
hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
hover-start-time | number | 50 | 否 | 按住后多久出现点击态，单位毫秒 | 1.0.0 |
hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间，单位毫秒 | 1.0.0 |
hover-class的冒泡阻止
<view class="section">
<view hover-class="bc_red" class="section__title">content</view>
</view>
<view class="section">
<!-- 阻止父节点出现hover状态 -->
<view hover-class="bc_red" class="section__title">
parent
<view hover-stop-propagation hover-class="bc_green" class="section__title">
child view
</view>
</view>
</view>.bc_red {
background: red;
width: 100px;
height: 120px;
}
.bc_green {
background: green;
width: 100px;
height: 140px;
}bindtap冒泡事件
<!-- 出现两次打印状态 -->
<view class="section">
<!-- 阻止父节点出现hover状态 -->
<view id="parentView" bindtap="onTap" hover-class="bc_red" class="section__title">
parent
<view id="childView" bindtap="onTap" hover-stop-propagation hover-class="bc_green" class="section__title">
child view
</view>
</view>
</view>
<!-- 出现一次打印状态 -->
<view class="section">
<view class="gap">5 示例</view>
<!-- 阻止父节点出现hover状态，阻止冒泡 -->
<view id="parentView" bindtap="onTap" hover-class="bc_red" class="section__title">
parent
<view id="childView" catchtap="onTap" hover-stop-propagation hover-class="bc_green" class="section__title">
child view
</view>
</view>
</view>onTap(e){
console.log(e.target)
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-08-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
