<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<script src="../lib/js/vue.js"></script>
<style>
.inner{
height: 150px;
background-color: #1b6d85;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 .stop 阻止事件冒泡(从里到外) -->
<div class="inner" @click="divClick">
<input type="button" value="button" @click.stop="btnClick">
</div>
<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先百度</a>
<!-- 使用.capture 实现捕获触发事件的机制(从外到里) -->
<div class="inner" @click.capture="divClick">
<input type="button" value="button" @click="btnClick">
</div>
<!-- 使用 .self 实现只有点击当前元素时,才会触发事件处理函数
.self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为
-->
<div class="inner" @click.self="divClick">
<input type="button" value="button" @click="btnClick">
</div>
<!-- 使用 .once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先百度</a>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
},
methods:{
divClick:function () {
console.log('触发 inner div 的点击事件')
},
btnClick(){
console.log('触发 btn 的点击事件')
},
linkClick(){
console.log('触发了链接的默认行为')
}
}
})
</script>
</body>
</html>