阻止Checkbox事件冒泡（uniapp）

需求：

        父元素为一个卡片，点击卡片会跳转到新的详情页。复选框（使用checkbox组件）在卡片内部的左侧，点击多选框可以多选删除卡片。

bug：

        在点击复选框时间，会触发父元素的点击事件，直接跳转。

解决方案：

        直接在checkbox上直接加@click.stop是不生效的，事件冒泡还是存在。用一个容器包裹住复选框，在父元素上添加  @click.stop 。

	<view class="left" @click.stop style="display: flex; align-items: center;">
			<checkbox :value="index.toString()"  style="transform:scale(0.8)" />
    </view>

常见的事件修饰符

        修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 @事件对于触发的事件调用 event.preventDefault()：

.stop - 阻止事件冒泡
.prevent - 阻止默认事件
.capture - 使用事件捕获模式
.self - 只在事件目标自身触发时触发处理函数
.once - 只触发一次处理函数

@事件（v-on）提供了事件修饰符:

.stop: 各平台均支持， 使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为
.native: 监听原生事件，各平台均支持
.prevent: 仅在 H5 平台支持
.capture: 仅在 H5 平台支持
.self: 仅在 H5 平台支持
.once: 仅在 H5 平台支持
.passive: 仅在 H5 平台支持

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。

注意

• 为兼容各端，事件需使用 @ 的方式绑定，请勿使用小程序端的 bind 和 catch 进行事件绑定；也不能在 JS 中使用event.preventDefault()和event.stopPropagation()方法；
• 若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

<view class="mask" @touchmove.stop.prevent="moveHandle"></view>

• 按键修饰符：uni-app 运行在手机端，没有键盘事件，所以不支持按键修饰符。