上一章节,讲解了v-on监听事件的基本用法,那么本章节来介绍一下事件修饰符,主要用来解决「阻止冒泡」、「阻止默认事件」等等情况。
@click.prevent.once
,只会执行一次阻止默认行为,第二次则不会阻止。另外,两个事件修饰符的先后效果一致。下面对于每个修饰符编写逐个示例。
编写一个按钮以及div,当按钮在div内,如果监听click事件,默认点击按钮的时候也会出发div的click事件,这种情况就是「事件冒泡」。
示例代码如下:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.inner{
width: 100%;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click="divHandler">
<input type="button" value="按钮" @click="btnHandler">
</div>
</div>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {},
methods:{
divHandler(){
console.log("触发div的click事件");
},
btnHandler(){
console.log("触发btn的click事件");
}
}
})
</script>
</body>
</html>
在浏览器执行如下:
那么为了「阻止冒泡事件」,可以使用「stop」事件修饰符,如下:
再次在浏览器点击按钮,查看触发事件如下:
可以看到div的click事件没有被触发,已经阻止事件冒泡了。
编写一个a
标签,绑定一个click
事件,阻止a
标签默认的href
跳转页面的行为。
示例如下:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.inner{
width: 100%;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="app">
<a href="https://www.baidu.com" @click="clickHandler">访问百度</a>
</div>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {},
methods:{
clickHandler(){
console.log("触发click事件");
},
}
})
</script>
</body>
</html>
在浏览器点击a
标签,则自动跳至百度页面,如下:
但是很多时候,其实是不需要a
标签的默认行为的,这时候就需要阻止默认行为了,如下:
此时点击a
标签则阻止了默认行为,只执行监听事件。
「事件捕获模式」其实是「冒泡事件」的相反事件传递模式,也就是「由外而内」的事件触发模式。
还是用刚才的按钮和div的冒泡示例,来看看:
在浏览器中,点击按钮,查看触发事件的顺序,如下:
点击btn按钮,查看触发事件,如下:
点击div,查看触发事件,如下:
多次点击btn按钮,查看触发事件,如下:
@click.prevent.once
,只会执行一次阻止默认行为,第二次则不会阻止。另外,两个事件修饰符的先后效果一致。在浏览器点击a
标签,查看触发事件,如下: