uniapp 之 解决事件冒泡(如:阻止switch 的事件冒泡、nvue 页面阻止事件冒泡)
场景描述: 首先需求是点击该项进入该详情页面;点击switch 切换该项的状态; 图片: 错误解决方案: 错误效果: 代码如下:<view class="contacts-item" @tap="toEditContacts"><view class="item-title"><view class="item-title-left"><te
·
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……
}
如有不足,望大家多多指点! 谢谢!
更多推荐
已为社区贡献3条内容
所有评论(0)