Vue中阻止checkBox事件冒泡
记录一个小note:@click.stop.native="()=>{}"<el-checkbox-group v-model="checkList"><div class="li" :class="item.checked ? 'active' : ''" v-for="(item,index) in scrollList" :key="item.title" @clic
·
记录一个小note:
@click.stop.native="()=>{}"
<el-checkbox-group v-model="checkList">
<div class="li" :class="item.checked ? 'active' : ''" v-for="(item,index) in scrollList" :key="item.title" @click="changeCheckbox(item,index)">
<span class="name">
<span class="text">{{item.title}}</span>
<el-checkbox :label="index" @click.stop.native="()=>{}" @change="changeCheckbox(item,index)"></el-checkbox>
</span>
<span class="num">{{item.num}}</span>
<span class="old">
<span>较前一日</span>
<span>{{item.yesterday}}</span>
</span>
<span class="old">
<span>较上周同期</span>
<span>{{item.lastWeek}}</span>
</span>
</div>
</el-checkbox-group>
stop
:等同于JavaScript中的event.stopPropagation()
,防止事件冒泡prevent
:等同于JavaScript中的event.preventDefault()
,防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播)capture
:与事件冒泡的方向相反,事件捕获由外到内self
:只会触发自己范围内的事件,不包含子元素once
:只会触发一次- native: 可以理解为把一个vue组件转化为一个普通的HTML标签,在vue组件上绑定事件时使用
更多推荐
已为社区贡献3条内容
所有评论(0)