传智黑马39期WEB前端教程-Vue基础-Vue指令-事件修饰符的介绍
事件修饰符的介绍
1）.stop 阻止冒泡
2）.prevent 阻止默认事件
3）.capture 添加事件侦听器时使用事件捕获模式
4）.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
5）.once 事件只触发一次
实例
1.进入目录 DEMO，新建文件 4.html
<!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>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
method:{
}
});
</script>
</body>
</html>
2.测试查看效果
3.进入目录 DEMO，修改文件 4.html，添加点击事件
<!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:darkcyan;
}
</style>
</head>
<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>
</html>
4.测试查看效果，点击按钮，产生冒泡机制
5.进入目录 DEMO，修改文件 4.html，添加 stop 阻止冒泡事件
<input type="button" value="戳他" @click.stop="btnHandler">
6.测试查看效果
7.进入目录 DEMO，修改文件 4.html
<!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:darkcyan;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 stop 阻止冒泡 -->
<!-- <div class="inner" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->
<a href="http://www.baidu.com" @click="linkClick">有问题，先去百度</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divHandler() {
console.log('这是触发了 inner div 的点击事件');
},
btnHandler() {
console.log('这是触发了 btn 按钮的点击事件');
},
linkClick() {
console.log('触发了连接的点击事件')
}
}
});
</script>
</body>
</html>
8.浏览测试，点击后会打开百度页面
9.进入目录 DEMO，修改文件 4.html，阻止默认行为，不打开百度页面
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
10.浏览测试，点击后会没有打开百度页面
11.进入目录 DEMO，修改文件 4.html，使用 .capture 实现捕获出发事件的机制，先出发 inner，再触发 button
<div class="inner" @click.capture="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
12.浏览测试
13.进入目录 DEMO，修改文件 4.html，使用 .self 实现只有点击当前元素时候，才会触发事件处理函数
<div class="inner" @click.self="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
14.浏览测试
15.进入目录 DEMO，修改文件 4.html，使用 .once 只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>
16.浏览测试，点击第二次的时候，阻止默认行为失效，打开了百度首页
17.进入目录 DEMO，修改文件 4.html，演示 .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>Document</title>
<script src="lib/vue-2.4.0.js"></script>
<style>
.inner {
height:150px;
background-color:darkcyan;
}
.outer {
padding:40px;
background-color:red;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<!-- <div class="inner" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->
<!-- 使用 .prevent 阻止默认行为-->
<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> -->
<!-- 使用 .capture 实现捕获出发事件的机制，先出发 inner，再触发 button -->
<!-- <div class="inner" @click.capture="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<!-- <div class="inner" @click.self="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->
<!-- 使用 .once 只触发一次事件处理函数 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>-->
<!-- 演示 .stop 和 .self 的区别 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divHandler() {
console.log('这是触发了 inner div 的点击事件');
},
btnHandler() {
console.log('这是触发了 btn 按钮的点击事件');
},
linkClick() {
console.log('触发了连接的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件');
}
}
});
</script>
</body>
</html>
18.浏览测试
19.进入目录 DEMO，修改文件 4.html，修改按钮事件，加上 .stop
<div class="outer" @click="div2Handler">
<div class="inner" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
20.浏览测试
21.进入目录 DEMO，修改文件 4.html，修改 inner 的事件，加上.self
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="divHandler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
22.浏览测试，self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为
posted on 2019-11-02 14:38 herisson_pan 阅读(17) 评论(0) 收藏 举报
浙公网安备 33010602011771号