128-Vue中的事件修饰符-阻止冒泡事件

128-Vue中的事件修饰符

.stop 阻止事件冒泡(*)
.prevent 阻止默认事件(*)
.prevent.stop 阻止默认事件的同时阻止冒泡
.once 阻止事件重复触发（once与stop不能一起使用，否则再次触发事件，依然会冒泡）(*)

只能触发一次，例如：抢优惠券！

<template><div><div class="big" @click="cb"><div class="small" @click="cs"><a href="#" @click.stop.prevent="ca">a标签</a></div></div><button @click.once="cc">点我</button></div>
</template><script>
export default {methods:{cb(){console.log("点击大的");},cs(){console.log("点击小的");},ca(){console.log("点击a标签");},cc(){console.log("点击按钮");}}}
</script><style>
.big{width: 300px;height: 300px;background-color: pink;
}
.small{width: 200px;height: 200px;background-color: skyblue;
}
</style>

效果如下：

128-Vue中的事件修饰符-阻止冒泡事件相关推荐

用vue的事件修饰符阻止冒泡
用mousemove事件举例 1.传统做法: 定义一个阻止冒泡的函数stop,形参为事件e,执行e.stopPropagation(), 在标签上添加v-on:mousemove="stop ...
Vue中事件修饰符与键盘事件
目录事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:与当前事件一致时触发 passive:事件的默认行为立即 ...
Vue事件处理（事件修饰符，键盘事件）
Vue中的事件修饰符:1.prevent:阻止默认事件(常用)2.stop: 阻止事件冒泡(常用)3.once: 事件只触发一次(常用)4.capture: 使用事件的捕获模式5.self:只有eve ...
vue中的.sync修饰符
文章目录引申 @update:自定义的属性名 .sync修饰符引申 vue中的数据传递一般是单向数据流,即父组件数据通过props传递给子组件.但是子组件可以通过自定义事件间接修改父组件中的数据, ...
Vue中props .sync修饰符的使用示例
前文一般情况下我们由父组件传递给子组件的对象并不想在子组件修改对象时改变父组件对象的原数据. 这种情况通常在watcher时是使用深度克隆对象供子组件使用,避免某些在数据改变时渲染bug问题但是有 ...
vue 指令 v-on 事件修饰符-自定义键盘事件
<body><div id="app">用户名:<input type="text" v-on:keyup.f1='clearCo ...
vue 事件上加阻止冒泡阻止默认事件
重点 vue事件修饰符  <a v-on:click.stop="doThis"></a><!-- 提交 ...
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
阻止事件冒泡的方法前端结构 <div id="app"><div class="father-box" @click="click ...
Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几 ...

128-Vue中的事件修饰符-阻止冒泡事件

128-Vue中的事件修饰符-阻止冒泡事件相关推荐

最新文章

热门文章