提出问题
下面代码中，在 div 里面有 button 按钮，而且都添加了 点击事件，触发事件时，先执行 button 按钮的事件，然后执行 div 的事件
实际上：我们只想执行 button 按钮的事件
<div id="app" >
<div @click="show2">
<input type="button" @click="show" value="弹出对话框1">
</div>
</div>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data: function(){
return{
name: "百度",
url: "http://www.baidu.com"
}
},
methods:{ // 在 methods 对象中定义方法
show:function(event){
alert("button事件")
},
show2:function(event){
alert("div事件")
}
}
}).mount('#app')
</script>
解决
在 按钮事件修改为 @click.stop ，可阻止事件冒泡，不执行 外部 div 的事件
<div id="app" >
<div @click="show2">
<input type="button" @click="show" value="弹出对话框1">
<input type="button" @click.stop="show" value="弹出对话框2">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
el: '#app',
methods:{ // 在 methods 对象中定义方法
show:function(){
alert("button事件")
},
show2:function(){
alert("div事件")
}
}
})
</script>