Vue学习之路第八篇:事件修饰符
学习准备:
①、顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了。
②、事件修饰符有以下几类:
.stop:阻止冒泡
.prevent:阻止默认事件
.capture:事件捕获
.self:只当事件在该元素本身触发时触发回调
.once:事件只触发一次
1、阻止冒泡
页面代码:
<div id="app" @click="clickDiv()">
<button @click="clickButton()">点击</button>
</div>
样式代码:
div{
background: #715F5F;
height: 100px;
width: 100px;
}
js代码:
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {},
methods : {
clickDiv(){
console.log('点击了div');
},
clickButton(){
console.log('点击了button');
}
}
});
</script>
运行效果:
当点击按钮的时候,浏览器控制台除了会输出“点击了button”还会输出“点击了div”,这是因为button按钮是div里的元素节点,当你点击button的时候,事件会向上冒泡,触发包含它的父元素所定义的事件,这就是冒泡事件。如果想阻止冒泡事件就需用到“.stop”修饰符。
<button @click.stop="clickButton">点击</button>
这里要注意“.”号不要忘记写。这时再点击按钮不会触发点击父元素div的事件。
2、阻止默认事件
什么是默认事件?如:点击a链接自动进行跳转、点击submit按钮自动提交表单等。我们以a链接为例:
<body>
<div id="app">
<a href="https://www.baidu.com" @click.prevent="linkClick()">有问题,先百度</a>
</div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {},
methods : {
linkClick(){
console.log('点击了a链接');
}
}
});
</script>
</body>
加上.prevent修饰符后,a链接不能进行跳转,但是仍然可以触发click事件。
3、事件捕获
还记得冒泡事件中触发的顺序吗?即:先触发button按钮的点击事件,然后会触发button父元素div的点击事件;如果我想点击button之后先触发父元素div的点击事件,然后再触发子元素button的点击事件呢?
<div id="app" @click.capture="clickDiv">
<button @click="clickButton">点击</button>
</div>
即:在事件触发中进行捕获,优先执行含有“.capture”修饰符的事件。
4、只当事件在该元素本身触发时触发回调
<div id="app" @click.self="clickDiv">
<button @click="clickButton">点击</button>
</div>
我们在父元素div里加了“.self”,这样父元素的点击事件只有在点击自身元素的情况下才可以触发,点击其他的任何元素(如子元素button)都不会触发包含修饰符“.self”的元素事件。
5、事件只触发一次
<body>
<div id="app">
<a href="https://www.baidu.com" @click.prevent.once="clickLink()">有问题,去百度</a>
</div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {},
methods : {
clickLink(){
console.log('点击了a链接');
}
}
});
</script>
</body>
①:这里a链接点击事件使用了两个事件修饰符,说明事件修饰符可以并列使用。
②:这里的修饰符“.once”的作用是让默认阻止行为(.prevent)只生效一次,所以当我们第一次点击a链接的时候,浏览器控制台会输出“点击了a链接”,但是页面不会跳转,当我们再次点击a链接的时候页面会跳转到百度页面,这就是".once"修饰符的作用。
③:大家可以把".prevent"和".once"的位置调换一下试试,即:@click.once.prevent="clickLink()",执行的结果还是一样的。
难点分析:.stop 和 .self 的区别
.stop是用来阻止所有父元素的事件冒泡,而.self只是用来阻止子元素对本身的事件调起,而不会影响其他父元素的事件冒泡。
<!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>事件修饰符</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<!-- 样式 -->
<style tyep="text/css">
#outDiv{
background: #715F5F;
height: 100px;
width: 100px;
padding: 20px;
}
#innerDiv{
background: #518E41;
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<!-- 页面 -->
<div id="outDiv" @click="clickOutDiv()">
<div id="innerDiv" @click="clickInnerDiv()">
<button @click="clickButton()">点击</button>
</div>
</div> <!-- JS -->
<script type="text/javascript">
var vm = new Vue({
el : "#outDiv",
data : {},
methods : {
clickOutDiv(){
console.log('点击了外部div');
},
clickInnerDiv(){
console.log('点击了内部div');
},
clickButton(){
console.log('点击了button');
}
}
});
</script>
</body>
</html>
这里我们定义了一个外部div,外部div里又包含了一个内部div,内部div包含了button按钮。这个时候我们点击button按钮的时候,会触发外部和内部div的click事件,即冒泡事件。
如果我们把代码改为:<button @click.stop="clickButton()">点击</button>,再点击按钮的时候,将不会触发外部两个div的click事件,这个上面已经说过。
如果我们把代码改为:
<div id="outDiv" @click="clickOutDiv()">
<div id="innerDiv" @click.self="clickInnerDiv()">
<button @click="clickButton()">点击</button>
</div>
</div>
再次点击button按钮的时候,innerDiv不会触发click事件,但是不会阻止outDiv触发click事件,因为内部div加了事件修饰符“.self”,即控制本身事件不受冒泡影响。
花时间去学习,切忌浮躁,不要走马观花,还是要沉淀下来仔细研究,哪怕进步很缓慢,也要力求真正有所得。
每天进步一点点!
最新文章
- 0042 MySQL学习笔记-入门--01
- 使用phpMyAdmin修改MySQL数据库root用户密码
- Linux关闭休眠和屏保模式
- 数组json格式的字符串 转 list<;Bean>;
- 边工作边刷题:70天一遍leetcode: day 86
- [css] px em rem
- Windows Server 2008 - How to Move the Quorum Disk Group
- Win8制作和使用恢复盘
- 【BZOJ】【3143】【HNOI2013】游走
- Linux强制踢出登录用户(断线账户剔除)
- ASP.NET 获取IP信息等探针
- 初探Lambda表达式/Java多核编程【0】从外部迭代到内部迭代
- jquery 高级 学习笔记
- 腾讯大数据平台Oceanus: A one-stop platform for real time stream processing powered by Apache Flink
- Spring 异常处理三种方式 @ExceptionHandler
- C# 实现表单的自动化测试<;通过程序控制一个网页>;
- Django CSRF提交遇见的问题
- SQL记录-PLSQL记录
- 【BZOJ 4832 】 4832: [Lydsy2017年4月月赛]抵制克苏恩 (期望DP)
- P2042 [NOI2005]维护数列 &;&; Splay区间操作(四)
热门文章
- python数据分析------文本挖掘(jieba)
- Javascript继承(原始写法,非es6 class)
- [bzoj3505 Cqoi2014] 数三角形 (容斥+数学)
- 学习redis遇到的问题
- Objective-C - 改变NSMutableArray的特定元素
- Visual C++ 经常使用快捷键
- Oracle学习(11):PLSQL程序设计
- 视差滚动demo (pc)
- Android 获取屏幕截图 和保存到本地的sd卡路径下
- 高校学生学籍系统C++&;amp;mysql