0
点赞
收藏
分享

微信扫一扫

【第三篇】Vue中的事件修饰符

【第三篇】Vue中的事件修饰符_事件修饰符

  本文我们来详细介绍下vue中的事件修饰符

Vue事件修饰符

事件修饰符概览

修饰符

说明

.stop

阻止冒泡

.prevent

阻止默认事件

.capture

添加事件侦听器时使用事件捕获模式

.self

只当事件在该元素本身(比如不是子元素)触发时触发回调

.once

事件只触发一次

事件修饰符具体介绍

.stop

  .stop用来防止冒泡,我们先来看看冒泡的场景

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.inner {
height: 150px;
background-color: gold;
}

.outer {
padding: 40px;
background-color: red;
}
</style>
</head>
<body>

<div id="app">
<div class="inner" @click="div1Handler">
<input type="button" value="点击" @click="btnHandler">
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {

},
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
}
}
})
</script>
</body>
</html>

页面操作效果

【第三篇】Vue中的事件修饰符_Vue_02

我们看到不光点击按钮的点击事件触发了,而且父容器div的点击事件也触发了,这时我们就可以使用.stop来阻止这个冒泡了,如下

【第三篇】Vue中的事件修饰符_事件修饰符_03

在访问测试

【第三篇】Vue中的事件修饰符_html_04

通过输出可以看到点击事件没有往上冒泡了!

.prevent

  阻止默认行为,我们可以通过a标签来演示,先看未阻止的情况

【第三篇】Vue中的事件修饰符_Vue_05

看下演示效果
【第三篇】Vue中的事件修饰符_修饰符_06

我们可以看到先触发了我们的弹出框,然后页面跳转了,这时我们可以阻止默认行为

【第三篇】Vue中的事件修饰符_点击事件_07

再看效果

【第三篇】Vue中的事件修饰符_修饰符_08

从效果中可以看出默认的跳转事件被阻止了!

.capture

  实现捕获触发事件的机制,即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。
就是谁有该事件修饰符,就先触发谁。 先看没有该修饰符的操作

【第三篇】Vue中的事件修饰符_事件修饰符_09

【第三篇】Vue中的事件修饰符_Vue_10

输出我们可以看到先触发的 按钮的点击事件,然后触发的div的点击事件,现在我们绑定 .capture

【第三篇】Vue中的事件修饰符_事件修饰符_11

【第三篇】Vue中的事件修饰符_修饰符_12

通过输出可以看到是先触发的 绑定的有".capture"的div,然后触发的btn按钮。

.self

  实现只有点击当前元素时候,才会触发事件处理函数

【第三篇】Vue中的事件修饰符_修饰符_13

效果演示:

【第三篇】Vue中的事件修饰符_Vue_14

.once

  只触发一次事件处理函数

【第三篇】Vue中的事件修饰符_修饰符_15

【第三篇】Vue中的事件修饰符_html_16

通过输出效果可以看出阻止默认行为只有效了一次!

.stop 和 .self 的区别

先看.stop的行为:

【第三篇】Vue中的事件修饰符_修饰符_17

点击btn按钮,阻止冒泡,我们看效果

【第三篇】Vue中的事件修饰符_点击事件_18

通过演示可以看到点击按钮,两个div的事件都没有触发。

再看.self

【第三篇】Vue中的事件修饰符_Vue_19

【第三篇】Vue中的事件修饰符_点击事件_20

通过演示可以看出self只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为。


举报

相关推荐

0 条评论