Vue事件修饰符的学习
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有:
- .stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡
- .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播)
- .capture:与事件冒泡的方向相反,事件捕获由外到内
- .self:只会触发自己范围内的事件,不包含子元素
- .once:只会触发一次
.stop:
<div class="inner" @click="div">
<!-- .stop阻止所有冒泡 -->
<input type="button" value="挫他" @click.stop="input">
</div>
methods: {
div() {
console.log("A")
},
input() {
console.log("B")
}
}
在没有使用.stop的时候,点击div的区域会在控制台输出A,点击按钮的时候会出现B和A(会从内到外触发)。当我们加上.stop的时候相当于在方法中调用了event.stopPropagation(),这样在点击子事件的时候不会触发父节点事件。
.prevent
<a href="http://www.baidu.com" @click.prevent="Label">有问题去百度</a>
methods: {
Label() {
console.log("触发a标签的点击事件")
}
}
在没有使用.prevent的时候,点击a标签的时候,会先在控制输出console,然后调转到百度网页,使用.prevent的时候相当于调用了event.preventDefault()只会输出console并不会跳装网页
.capture
<!-- .capture 捕获事件,从外到里执行事件-->
<div class="inner" @click.capture="div">
<input type="button" value="挫他" @click="input">
</div>
methods: {
div() {
console.log("A")
},
input() {
console.log("B")
}
}
在没有使用.capture的时候点击input控制台输出的是B和A,使用.capture的时候点击input控制台输出的是A和B。.capture的作用是点击子节点事件的时候,会从父节点依次向当前子节点事件执行
.self
<div class="outer" @click="div">
<div class="inner" @click.self="div1">
<input type="button" value="戳他" @click="input">
</div>
</div>
methods: {
div() {
console.log("A")
},
input() {
console.log("C")
},
div1() {
console.log("B")
}
}
.self只会触发自己范围内的事件,不会包含子元素,点击div1的时候只会出现B和A,不会出现子节点事件。点击按钮的时候只会出现C和A,不会出现B事件
.once
<input type="button" value="戳他" @click.once="input">
methods: {
input() {
console.log("A")
}
}
使用.once修饰的只会执行一次,点击多次控制台也只会输出第一次点击的A