vue-事件修饰符-详解(.prevent .stop .once .capture .self)
vue事件修饰符-详解
-
.prevent -------等于javascript的event.preventDefault()
作用:阻止默认程序的运行<form @submit.prevent="SomeFunction"></form>
单独submit点击后会自动进行提交等一系列操作,prevent就可以阻止这些操作,让上面这段代码乖乖执行我们分配给它的SomeFunction
-
.stop
作用:阻止冒泡
什么叫冒泡?冒泡就是子元素的事件传递到父元素,用以下代码为例,点击button后,触发inner-click,但是因为这个button在中间的这个middle里,同时也相当于我们点击了middle这个元素,也就是button的父元素。同理,也相当于点击了outer元素,也就是说执行了inner-click后再执行middle-click紧接着outer-click。这就叫做冒泡,一个从子元素向父元素传递事件的行为。<div id="app"> <div class="outer" @click="outer-click"> <div class="middle" @click="middle-click"> <button @click="inner-click">点击我(^_^)</button> </div> </div> </div>
methods: { inner: function () { console.log('inner: 这是最里面的Button' ) }, middle: function () { console.log('middle: 这是中间的Div' ) }, outer: function () { console.log('outer: 这是外面的Div' ) } }
运行结果:
inner: 这是最里面的Buttonmiddle: 这是中间的Div outer: 这是外面的Div
.stop的存在就相当于阻止事件向父元素传递,保证只执行inner-cli
<div id="app"> <div class="outer" @click="outer-cli"> <div class="middle" @click="middle-cli"> <button @click.stop="inner-cli">点击我(^_^)</button> </div> </div> </div>
运行结果:
inner: 这是最里面的Button
同理.stop如果放在middle里面,那么输出结果为:
inner: 这是最里面的Buttonmiddle: 这是中间的Div
-
.capture
作用:打乱冒泡顺序,用以下代码为例,发生click事件时会优先去找你可以传递到的所有父元素中最后一个有.capture的元素(这里可以传递到middle和outer,最有一个有.capture的元素是outer),然后优先执行这个元素的事件,紧接着执行倒数第二个有.capture的事件(middle),最后再按照正常的冒泡顺序从自己开始往上执行未经执行的父元素的click事件<div id="app"> <div class="outer" @click.capture="outer"> <div class="middle" @click.capture="middle"> <button @click="inner">点击我(^_^)</button> </div> </div> </div>
运行结果:
outer: 这是外面的Div middle: 这是中间的Div inner: 这是最里面的Button
Some More Examples:
<div id="app"> <div class="outer" @click="outer"> <div class="middle" @click.capture="middle"> <button @click="inner">点击我(^_^)</button> </div> </div> </div>
运行结果:
middle: 这是中间的Div inner: 这是最里面的Buttonouter: 这是外面的Div
-
.self
作用:不让子元素的事件触发自己绑定的事件,但是不会阻止冒泡!
例子:<div id="app"> <div class="outer" @click="outer"> <div class="middle" @click.self="middle"> <button @click="inner">点击我(^_^)</button> </div> </div> </div>
这里middle这里有一个.self,当我们点击button的时候,先执行inner,传递到middle,但是.self阻止了middle的cli事件,所以继续冒泡到outer,执行outer的click事件。
运行结果:inner: 这是最里面的Buttonouter: 这是外面的Div
-
.once
顾名思义,事件只会触发一次<button @click.once="inner">点击我(^_^)</button>
祝你好运!!!
- VUE的事件修饰符,once,prevent,stop,capture,self,passive
- vue 事件修饰符 stop,capture,prevent
- 详解Vue 事件修饰符capture 的使用
- vue.js 中的.capture事件修饰符的用法。
- vue2.0click点击事件修饰符stop阻止单击事件冒泡prevent阻止默认事件
- 基于vue.js中事件修饰符.self的用法(详解)
- Vue 事件修饰符.self的用法
- Vue 事件修饰符 详解
- Vue动画事件详解及过渡动画实例
- vue-事件修饰符
- vue click.stop阻止点击事件继续传播的方法
- Vue 按键修饰符处理事件的方法
- Vue 框架-03-键盘事件、健值修饰符、双向数据绑定
- vue中的.capture和.self区分,初步理解
- 关于js中return false、event.preventDefault()和event.stopPropagation()区别,以及阻止事件冒泡和阻止默认事件
- js事件event.preventDefault()和event.stopPropagation()
- vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
- 阻止默认和冒泡事件,认清event.preventDefault()、event.stopPropagation()和return false区别
- Vue.js中 v-model 指令的修饰符详解
- 《vue2.0 框架学习》--键盘事件和修饰符