事件冒泡
阻止冒泡
//1. 原生js方式,依赖于事件对象
<div class="container">
<div @click="divClick">
<p @click="pClick">
<button @click="btnClick($event)">点击</button>
</p>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: ".container",
methods: {
divClick() {
console.log('这是div')
},
pClick() {
console.log('这是p')
},
btnClick(e) {
console.log('这是button')
e.stopPropagation()
}
}
})
</script>
//2. vue方式不依赖于事件对象 @click.stop
事件默认行为
1. 原生js方式,依赖于事件对象 e.preventDefault();
<div class="container">
<a href="#" @click="aClick($event)">a链接</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el: ".container",
methods: {
aClick(e){
console.log("链接")
e.preventDefault();
}
}
})
</script>
2. vue方式 @click.prevent