vue.js — 事件修饰符的简单介绍

最新推荐文章于 2024-04-04 11:02:50 发布

总会吃到鸡的

最新推荐文章于 2024-04-04 11:02:50 发布

阅读量307

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_42436355/article/details/89401752

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue.js里面常用的事件修饰符有五个，分别是：.stop 阻止冒泡、 .prevent 阻止默认事件、 .capture 添加事件侦听器使用事件捕获模式、 .self 当事件在该元素本身（比如不是子元素）触发时触发回调、.once 事件只能触发一次

1、.stop 阻止冒泡事件修饰符

阻止冒泡事件修饰符，顾名思义，就是阻止冒泡事件，下面这个例子，可以看出来，用了 .stop 和没用 . stop 的区别，先来一个正常版本的：

<style>
.inner{
    height:150px;
    background-color:darkcyan;
}
</style>
<body>
    <div id = "app">
        <div class = "inner" @click="divHandler">
            <input type ="button" value="戳他" @click="btnHandler">
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
            divHandler(){
                console.log("这是触发了 inner div 的点击事件")
                },
            btnHandler(){
                console.log("这时触发了 btn 按钮的点击事件")    
                }
            }
        })
    </script>
</body>

执行上面代码，在浏览器中点击按钮 "戳他" 后，我们可以在开发者工具里面看到输出的两句话：

从图中可以看出，默认是有冒泡事件的，虽然我们只点击了一个按钮，但它外层的 div 点击事件也被触发了。

下面我们把.stop 事件修饰符添加进去：

<style>
.inner{
    height:150px;
    background-color:darkcyan;
    }
</style>
<body>
    <div id="app">
        <div class="inner" @click="divHandler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:#app,
            data:{},
            methods:{
                divHandler(){
                    console.log("这是触发了 inner div 的点击事件")
                }
                btnHandler(){
                    console.log("这是触发了 btn 按钮的点击事件")
                }
        })
    </script>
</body>

执行上面的代码，在浏览器中点击按钮 "戳他"，我们可以看到在开发者工具中输出的一句话：

明显可以看出，将按钮的点击事件修改为： @click.stop="btnHandler" 后， .stop阻止了默认的冒泡事件，点击按钮时只触发了它本身。

2、.prevent 阻止默认事件

下面直接举例：

<div id="app">
    <a href="http://www.baidu.com" @click="linkClick">有问题，先百度</a>
</div>
<script>
    var vm = new Vue({
        el:#app,
        data:{},
        methods:{
            linkClick(){
                console.log('触发了链接的点击事件')
            }
        }
    })
</script>

上面是一个正常的跳转链接，点击链接后，我们将看到开发者工具中弹出一句话，然后跳转到百度首页：

下面，我在上面的代码中加上 .prevent 阻止默认事件：

<div id="app">
    <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先百度</a>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            linkClick(){
                console.log("触发了链接的点击事件")
            }
        }
    })
</script>

加上 .prevent 阻止默认事件之后，再到浏览器中点击链接时，开发者工具中依旧会弹出一句话，但是不会再跳转页面，这就起到了阻止默认事件的作用。

3、 .capture 添加事件侦听器使用事件捕获模式

这里我们直接借用第一个例子的源代码，然后稍微做一点修改:

<style>
.inner{
    height:150px;
    background-color:darkcyan;
}
</style>
<body>
    <div id = "app">
        <div class = "inner" @click.capture="divHandler">
            <input type ="button" value="戳他" @click="btnHandler">
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
            divHandler(){
                console.log("这是触发了 inner div 的点击事件")
                },
            btnHandler(){
                console.log("这时触发了 btn 按钮的点击事件")    
                }
            }
        })
    </script>
</body>

执行这段代码后，点击浏览器中的按钮，将会在开发者工具中看到下面两句话：

从图中可以看出，使用 .capture 修饰符后，先触发了外层的 div 事件，再触发的里层 btn 事件，从外到里的捕获。

4、 .self 当事件在该元素自身（比如不是子元素）触发时触发回调

<style>
.inner{
    height:150px;
    background-color:darkcyan;
}
</style>
<body>
    <div id = "app">
        <div class = "inner" @click.self="divHandler">
            <input type ="button" value="戳他" @click="btnHandler">
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
            divHandler(){
                console.log("这是触发了 inner div 的点击事件")
                },
            btnHandler(){
                console.log("这时触发了 btn 按钮的点击事件")    
                }
            }
        })
    </script>
</body>

执行以上代码时，在 div身上的 .self 阻止了冒泡事件的发生，只有在点击 div 本身的时候，才会触发 div 身上的点击事件

5、.once 事件只能触发一次

.once 事件理解起来非常简单

<body>
    <div id = "app">
        <div class = "inner" @click="divHandler">
            <input type ="button" value="戳他" @click.once="btnHandler">
        </div>
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{},
            methods:{
            divHandler(){
                console.log("这是触发了 inner div 的点击事件")
                },
            btnHandler(){
                console.log("这时触发了 btn 按钮的点击事件")    
                }
            }
        })
    </script>
</body>

执行上面的代码后，无论点击多少次按钮，开发者工具里面只弹出一次console.log():

总会吃到鸡的

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js — 事件修饰符的简单介绍

vue.js里面常用的事件修饰符有五个，分别是：.stop 阻止冒泡、 .prevent 阻止默认事件、 .capture 添加事件侦听器使用事件捕获模式、 .self 当事件在该元素本身（比如不是子元素）触发时触发回调、.once 事件只能触发一次1、.stop 阻止冒泡事件修饰符阻止冒泡事件修饰符，顾名思义，就是阻止冒泡事件，下面这个例子，可以看出来，用了 .stop 和没用 ...
复制链接

扫一扫