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>页面操作效果
我们看到不光点击按钮的点击事件触发了，而且父容器div的点击事件也触发了，这时我们就可以使用.stop来阻止这个冒泡了，如下
在访问测试
通过输出可以看到点击事件没有往上冒泡了！
.prevent
阻止默认行为,我们可以通过a标签来演示，先看未阻止的情况
看下演示效果
我们可以看到先触发了我们的弹出框，然后页面跳转了，这时我们可以阻止默认行为
再看效果
从效果中可以看出默认的跳转事件被阻止了！
.capture
实现捕获触发事件的机制,即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。 就是谁有该事件修饰符，就先触发谁。 先看没有该修饰符的操作
输出我们可以看到先触发的 按钮的点击事件，然后触发的div的点击事件，现在我们绑定 .capture
通过输出可以看到是先触发的 绑定的有”.capture”的div，然后触发的btn按钮。
.self
实现只有点击当前元素时候，才会触发事件处理函数
效果演示:
.once
只触发一次事件处理函数
通过输出效果可以看出阻止默认行为只有效了一次！
.stop 和 .self 的区别
先看.stop的行为:
点击btn按钮，阻止冒泡，我们看效果
通过演示可以看到点击按钮，两个div的事件都没有触发。
再看.self
通过演示可以看出self只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/106504.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年4月2，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
腾讯云开发者
