#yyds干货盘点#【愚公系列】2022年12月 微信小程序-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  bindtap="onTap" hover-class="bc_red" class="section__title">
		parent
		<view  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  bindtap="onTap" hover-class="bc_red" class="section__title">
		parent
		<view  catchtap="onTap" hover-stop-propagation hover-class="bc_green" class="section__title">
			child view
		</view>
	</view>
</view>

onTap(e){
  console.log(e.target)
}