.stop是Vue中一种事件修饰符,可以阻止事件冒泡,最近开发小程序用到了.stop阻止冒泡
开发过程中发现,如果用户点击红色的区域,选项是无法被选中的,只有当点击文字部分或者圆框部分,才会触发点击事件
看了一下组件的源码,使用的是uniapp开源u-view1.0组件库的u-radio组件,源码如下
<template>
<view class="u-radio" :style="[radioStyle]">
<view class="u-radio__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
<u-icon
class="u-radio__icon-wrap__icon"
name="checkbox-mark"
:size="elIconSize"
:color="iconColor"/>
</view>
<view class="u-radio__label" @tap="onClickLabel" :style="{
fontSize: $u.addUnit(labelSize)
}">
<slot />
</view>
</view>
</template>
我们可以发现,源码中第二行,class="u-radio"这一行是整个行的容器;第二个view容器是选择框的;第3个view容器是我们的文字容器。整行容器没有@tap事件,只有文字和选择框的容器有@tap事件
发现了问题,我们就给第二行class="u-radio"的容器增加一个tap事件
<view class="u-radio" :style="[radioStyle]" @tap="onClickLabel">
测了一下,现在点击空白处也有点击事件了,但是点击文字或者选择框的话,事件会执行两次,这就是因为冒泡了——点击之后,先执行文字或者选择框容器(内部容器)的点击事件,再冒泡到父容器,也就是我们刚刚加的那个tap事件,由此便会执行两次点击事件
我们给内部的tap事件增加.stop修饰符,阻止冒泡
<template>
<view class="u-radio" :style="[radioStyle]" @tap="onClickLabel">
<view class="u-radio__icon-wrap" @tap.stop="toggle" :class="[iconClass]" :style="[iconStyle]">
<u-icon
class="u-radio__icon-wrap__icon"
name="checkbox-mark"
:size="elIconSize"
:color="iconColor"/>
</view>
<view class="u-radio__label" @tap.stop="onClickLabel" :style="{
fontSize: $u.addUnit(labelSize)
}">
<slot />
</view>
</view>
</template>
再测试,就没有问题了,这就是Vue .stop阻止冒泡实际应用