Uniapp 之 解决事件冒泡（如：阻止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 即可解决；