[JavaScript知识库]Vue事件修饰符、代码演示

1、.prevent（阻止默认行为）（常用）

<div id="app">
<!-- .prevent：阻止默认事件发生  -->
    <a href="www.baidu.com" @click.prevent="showInfo">百度一下</a>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: 'YICHEN'
        },
        methods: {
            showInfo(event) {
                event.preventDefault() // js原生阻止默认事件
                console.log('我被点击了')
            }
        }
    })
</script>

2、.stop（阻止事件冒泡）（常用）

<div id="app">
    <!-- .stop阻止事件冒泡 -->
    <div @click="showInfo">
        <a href="www.baidu.com" @click.stop="showInfo">百度一下</a>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: 'YICHEN'
        },
        methods: {
            showInfo(event) {
                event.stopPropagation() // js原生阻止事件冒泡
                console.log('我被点击了')
            }
        }
    })
</script>

3、.once（事件只触发一次）（常用）

<div id="app">
    <!-- .once事件只触发一次 -->
    <a href="www.baidu.com" @click.once="showInfo">百度一下</a>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: 'YICHEN'
        },
        methods: {
            showInfo(event) {
                console.log('我被点击了')
            }
        }
    })
</script>

4、.capture（事件捕获就开始执行）

概念：捕获阶段是从外到内，冒泡阶段是从内到外
事件执行的时候，是先捕获在冒泡，函数的触发是在冒泡阶段，如果设置了.capture的话，在捕获阶段就开始执行函数了

<div id="YICHEN">
    <div @click="click1(1)" class="div1">
        div1
        <div @click="click2(2)" class="div2">
            div2
        </div>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#YICHEN',
        methods: {
            click1(value) {
                console.log(value)
            },
            click2(value) {
                console.log(value)
            }
        }
    })
</script>

以上代码的执行结果如下，div1包含了div2，点击div2，是先执行div2的函数，在执行div1的函数。这就是先函数在冒泡阶段执行

添加capture修饰符

<div id="YICHEN">
    <!-- .capture 捕获时触发函数 -->
    <div @click.capture="click1(1)" class="div1">
        div1
        <div @click="click2(2)" class="div2">
            div2
        </div>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#YICHEN',
        methods: {
            click1(value) {
                console.log(value)
            },
            click2(value) {
                console.log(value)
            }
        }
    })
</script>

以上代码的执行结果如下，div1包含了div2，点击div2，就先执行div1的函数，在执行div2的函数。

5、.self（只有event.target是当前操作的DOM时，才触发的事件）

<div id="YICHEN">
    <div @click="click1" class="div1">
        div1
        <span @click="click2" class="span2">
            span2
        </span>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#YICHEN',
        methods: {
            click1(e) {
                console.log(e.target)
            },
            click2(e) {
                console.log(e.target)
            }
        }
    })
</script>

点击span2后，的执行结果如下:

添加self修饰符

<div id="YICHEN">
    <div @click.self="click1" class="div1">
        div1
        <span @click="click2" class="span2">
            span2
        </span>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#YICHEN',
        methods: {
            click1(e) {
                console.log(e.target)
            },
            click2(e) {
                console.log(e.target)
            }
        }
    })
</script>

因为只点击了span2，所以当前的e.target指向的当前DOM。冒泡到上层结构的时候，e.target不一样，所以就不会触发div1的函数。执行结果如下：

6、.passive（事件的默认行为立即执行，不用等待事件的回调执行完毕在执行默认行为）(不常用)

<ul @wheel.passive="wheel" class="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ui>

滚轮事件是先执行回调，然后再触发默认行为。如果回调函数中，执行的逻辑较大，就要一直等待。所以添加passive修饰符就可以先触发滚动行为，可以提高用户体验。

事件修饰符 （修饰符可以连续使用，比如 .stop.prevent）