【愚公系列】2022年08月 微信小程序-view冒泡事件详解
【摘要】 前言微信小程序事件主要分为冒泡事件和非冒泡事件:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。WXML的冒泡事件列表:类型触发条件最低版本touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断,如来电提醒,弹窗touchend手指触摸动作结束tap手指触摸后马...
前言
微信小程序事件主要分为冒泡事件和非冒泡事件:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
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)
}
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)