如图所示，在底部弹出层出现的时候希望点击卡片能够正常勾选。同时点击空白区域又可以关闭底部弹层，如果使用u-popup自带的遮罩层可以实现点击但是不可以实现勾选，实现勾选不能实现关闭。解决办法就是使用**@touchend.stop来代替点击事件，并在子元素上使用@touchend.stop**来阻止冒泡事件产生，附上代码大家可以参考。
html
<view class="container" @touchend.stop="endShake()">
<view class="card-box">
<u-checkbox-group shape="circle" @change="checkboxChange()" activeColor="#3d80fc" iconSize="32" size='32'>
<view :class="['card-item', 'shadow', shake ? `shake-${item.runStatus}` : `status-${item.runStatus}`]"
@touchstart.prevent="gtouchstart(item)" @touchend.stop="gtouchEnd(item)" @touchmove.stop="gtouchmove()"
v-for="item in cardInfo" :key="item.id">
<view class="info-box" v-if="!shake">
<PowerChart :value="item.voltage" />
<SignalChart :value="item.rssi" />
</view>
<view class="info-box" style="z-index: 99;" v-else>
<u-checkbox :name="item.id"></u-checkbox>
</view>
<image :src="'/static/images/'+ item.imgpath" mode=""></image>
<view>{{item.name}}</view>
<view v-if="item.runStatus == 10" class="mask"></view>
</view>
<view class="card-add shadow" @touchend.stop="toAdd()">
<image src="/static/images/card-add.png" mode=""></image>
<view>添加设备</view>
</view>
</u-checkbox-group>
</view>
<!-- <u-popup :show="shake" :round="10" mode="bottom" :overlayOpacity="0" @close="closeShake"> -->
<u-popup :show="shake" :round="10" mode="bottom" :overlay="false " @close="closeShake">
<view class="bom-box">
<view class="item-bom" @click="removeDevice()">
<u-icon name="trash" size="36"></u-icon>
删除
</view>
<view class="item-bom" @click="famshow()">
<u-icon name="list" size="36"></u-icon>
分配
</view>
</view>
</u-popup>
<u-popup :show="show" :round="10" mode="bottom" @close="close">
<scroll-view @scrolltolower="onScrolltolower" class="scroll-view" scroll-y>
<view class="item-txt" @click="famClick(item)" v-for="(item,index) in famList" :key="index">{{item.name}}</view>
</scroll-view>
</u-popup>
<image class="bgimg" src="../../static/images/home-bg.png" mode=""></image>
<m-tabbar v-if="!shake" fixed fill current="0" :tabbar="DefaultTabbarConfig"></m-tabbar>
</view>