uniapp 之 解决事件冒泡（如：阻止switch 的事件冒泡、nvue 页面阻止事件冒泡）

switch 阻止事件冒泡

场景描述：

  首先需求是点击该项进入该详情页面；点击switch 切换该项的状态；
 
图片：

 
 
 

错误解决方案

 
  错误效果：

 
  代码如下：

<view class="contacts-item" @tap="toEditContacts">
	<view class="item-title">
		<view class="item-title-left">
			<text class="contacts-name">张三丰</text>
			<image class="contacts-icon" src="/static/contract/icon_route.png" />
		</view>
		<view class="item-title-right">
			<switch :checked="isChecked" color="#FFCC33" @change.stop="changeIsChecked"/>
			<view class="switch-tips" :class="[ isChecked ? 'start-tips' : 'stop-tips' ]">
				{{ isChecked ? '启用' : '停用' }}
			</view>
		</view>
	</view>
</view>

很明显，这里给switch 的chage事件加了.stop并不起作用；
 
 
 

正确解决方案

 
  正确效果：

  代码如下：

<view class="contacts-list">
			<view class="contacts-item" @tap="toEditContacts">
				<view class="item-title">
					<view class="item-title-left">
						<text class="contacts-name">张三丰</text>
						<image class="contacts-icon" src="/static/contract/icon_route.png" />
					</view>
					<view class="item-title-right" @tap.stop.prevent>
						<switch :checked="isChecked" color="#FFCC33" @change.stop="changeIsChecked"/>
						<view class="switch-tips" :class="[ isChecked ? 'start-tips' : 'stop-tips' ]">
							{{ isChecked ? '启用' : '停用' }}
						</view>
					</view>
				</view>
</view>

直接在switch 的父元素上加 @tap.stop.prevent 即可解决；

 
 

nvue 页面阻止事件冒泡

说明：
 
  另外一种情况就是：@click.stop="handleClick" 在H5，小程序，普通app项目中起到阻止事件冒泡的作用，但是有个别页面不起作用，这个页面就是 nvue 页面；

nvue 页面阻止事件冒泡的解决方案：

<view @click.stop="getDetail">
	<view @click.stop="handleClick($event)">nvue 阻止事件冒泡，不会触发getDetail()事件</view>
</view>

getDetail() {
	console.log("获取详情")
},
handleClick(e) {
	// nvue 页面阻止事件冒泡
	// #ifdef APP-NVUE
	e.stopPropagation()
	// #endif
	
	// doing……
}

 
 
 

如有不足，望大家多多指点！ 谢谢！