Vue常用指令之二点击修饰符

[TOC]

## Vue常用指令之二 点击修饰符

1️⃣使用修饰符stop阻止事件冒泡

在@click事件后添加.stop就可以阻止事件向上冒泡，@cikck.stop="methods()"

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</hred>
<div id="app">
    <div @click="parent">
        <input type="button" @click.stop="son" value="我是子级">
    </div>
    <a href="https://www.baidu.com/" @click.prevent="noGoDefault">我不去</a>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            son() {
                console.log("I am son")
            },
            parent() {
                console.log("I am parent")
            },
            noGoDefault() {
                console.log("I don't go")
            }
        }
    })
</script>
</html>
```

上诉代码中点击【我是子级】按钮在浏览器控制台只会输出I am son，如果去除点击事件后面的.stop，控制台就会多输出I am parent，这就是stop阻止了事件向上级元素冒泡

2️⃣使用修饰符prevent阻止默认行为，例如a标签的href，在上述代码中点击【我不去】链接，只会触发输出I don't go，并不会跳转到百度网页

3️⃣使用修饰符capture可以变更事件的冒泡顺序，使用capture修饰符的事件先执行，再按元素层级由内向外冒泡

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</hred>
<div id="app">
    <div @click="show3()" style="width:200px;height: 400px;background-color: red;">
        <div @click.capture="show2()" style="width:100px;height: 200px;background-color: royalblue;">
            <div @click="show1()" style="width:50px;height: 100px;background-color: sandybrown;"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            show1() {
                console.log("I am show1")
            },
            show2() {
                console.log("I am show2")
            },
            show3() {
                console.log("I am show3")
            }
        }
    })
</script>
</html>
```

在上面的代码下，我们点击最内层背景颜色是sandybrown的div（show1方法），控制台打印的顺序是I am show2，I am show1，I am show3，这就是因为show2的点击事件添加了capture修饰符，所以它的事件先被捕获了，然后由内向外开始冒泡触发点击事件

4️⃣使用self修饰符，只有事件在元素本身上触发才生效，它不会因为冒泡被触发，如果将上面代码中将@click="show3()"修改为@click.self="show3()"，我们同样去点击背景颜色是sandybrown的div，这时控制台输出的内容就是I am show2，I am show1。show3()方法并未执行，我们去点击背景颜色是red的div时才输出了I am show3，这就是self修饰符的作用只有事件在本身元素上触发才生效。

5️⃣使用once修饰符，那么绑定修饰符的事件只能被触发一次，同样在上面的代码中将@click="show1()"修改为@click.once="show1()"，我们第一次去点击背景颜色是sandybrown的div，这时控制台输出I am show2，I am show1，I am show3，当我们第二次去点击时，控制台只输出了I am show2，I am show3，这就是事件通过once修饰后只能被触发一次的结果。