事件修饰符
顾名思义，“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。
事件修饰符有：
| .stop | 阻止冒泡 |
|---|---|
| .prevent | 阻止默认事件 |
| .capture | 添加事件侦听器时使用事件捕获模式 |
| .self | 只当事件在该元素本身(不是子元素)触发时回调 |
| .once | 事件只触发一次 |
1.阻止冒泡
<div id="app" @click=clickDiv()>
<button @click="clickButton()">点击</button>
</div>
<script>
var vm=new Vue({
el:"app",
data:{},
methods:{
clickDiv(){
console.log("点击了div")
},
clickButton(){
console.log("点击了button")
}
}
})
</script>
当点击按钮的时候，浏览器控制台除了会输出“点击了button”还会输出“点击了div”，这是因为button按钮是div里的元素节点，当你点击button的时候，事件会向上冒泡，触发包含它的父元素所定义的事件，这就是冒泡事件。
如果想阻止冒泡事件就需用到“.stop”修饰符。
<button @click.stop="clickButton"></button>
2.阻止默认事件
什么是默认事件？如：点击a链接自动进行跳转、点击submit按钮自动提交表单等。
这里以a链接为例：
<body>
<div id="app">
<a href="https://www.baidu.com" @click.prevent="linkclick()">有问题，问百度</a>
</div>
<script>
new Vue({
el:"app",
data：{},
methods:{
linkclick(){
console.log("点击了a链接")
}
}
})
</script>
</body>
3.事件捕获
还记得冒泡事件中触发的顺序吗？即：先触发button按钮的点击事件，然后再触发button父元素div的点击事件；如果我想点击button之后先触发父元素div的点击事件，然后再触发子元素button的点击事件呢？
<div id="app" @click.capture="clickDiv">
<button @click="clickButton"点击></button>
</div>
即：在事件触发中进行捕获，优先执行含有".caputre"修饰符的事件。
4.只当事件在该元素本身触发时触发回调
<div id="app" @click.self="clickDiv">
<button @click="clickButton">点击</button>
</div>
我们在父元素div里加了".self"，这样父元素的点击事件只有在点击自身元素的情况下才可以触发，点击其他任何元素（如子元素button）都不会触发包含修饰符".self"的元素事件。
5.事件只触发一次
<body>
<div id="app">
<a href="https://www.baidu.com" @click.prevent.once="clicklink">有问题，问百度</a>
</div>
<script>
el:"#app",
data:{},
methods:{
clicklink(){
console.log("点击了a链接")
}
}
</script>
</body>标签：触发,vue,button,修饰符,点击,事件,元素 From： https://www.cnblogs.com/ZhuAo/p/16862461.html