【愚公系列】2022年08月 微信小程序-view冒泡事件详解

举报
愚公搬代码 发表于 2022/08/31 21:41:51 2022/08/31
1.2k+ 0 0
【摘要】 前言微信小程序事件主要分为冒泡事件和非冒泡事件:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。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

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。