<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.inner{
height:100px;
width:1000px;
background-color:pink;
}
</style>
<!-- 导入vue包 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<div @click="divHandler" class="inner">
<input type="button" value="戳他" @click.stop="btnHandler"/>
</div>
<!-- 使用.prevent阻止默认行为-->
<a href="http://www.baidu.com" @click.prevent="linkClick"></a>
<!-- 使用 .capture 捕获事件-->
<div @click.apture="divHandler" class="inner">
<input type="button" value="戳他" @click="btnHandler"/>
</div>
<!-- 使用 .self 显示元素本身事件-->
<div @click.self="divHandler" class="inner">
<input type="button" value="戳他" @click="btnHandler"/>
</div>
</div>
<script type="text/javascript">
//创建vue实例,得到viewModel
var vm = new Vue({
el:'#app',
data:{},
methods: {
divHandler(){
console.log('这是触发了inner div 的点击事件')
},
btnHandler(){
console.log('这是触发了btn 的点击事件')
},
linkClick(){
console.log('这是触发了link的点击事件')
},
}
})
</script>
</body>
</html>
.stop阻止冒泡
<div @click="divHandler" class="inner">
<input type="button" value="戳他" @click="btnHandler"/>
</div>
如果不添加 点击btn 会出现这种情况:
添加以后就可以阻止冒泡:
<!-- 使用 .stop 阻止冒泡 -->
<div @click="divHandler" class="inner">
<input type="button" value="戳他" @click.stop="btnHandler"/>
</div>
prevent 阻止默认行为
默认事件指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会 重新加载页面等,使用".prevent"修饰符可以阻止这些事件的发生。
不添加的话 会跳转网页 跳转到 百度首页
<a href="http://www.baidu.com" @click="linkClick"></a>
添加的话不会跳转
<a href="http://www.baidu.com" @click.prevent="linkClick"></a>
.capture:捕获事件
即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件。
<div @click.apture="divHandler" class="inner">
<input type="button" value="戳他" @click="btnHandler"/>
</div>
. self:将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响
<div @click.self="divHandler" class="inner">
<input type="button" value="戳他" @click="btnHandler"/>
</div>