vue教程-事件修饰符-阻止事件冒泡 .stop-马育民老师

上接：[vue教程-事件修饰符介绍](https://www.malaoshi.top/show_1IX2bPz7jE94.html "vue教程-事件修饰符介绍")

# 提出问题

下面代码中，在 `div` 里面有 `button` 按钮，而且都添加了 点击事件，触发事件时，先执行 `button` 按钮的事件，然后执行 `div` 的事件

**实际上：**我们只想执行 `button` 按钮的事件

```
<div id="app" @click="show2">
    <input type="button" @click="show" value="弹出对话框1">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
    el: '#app',
    methods:{ // 在 methods 对象中定义方法
        show:function(event){
            alert("button事件")
        },
        show2:function(event){
            alert("div事件")
        }
    }
})
</script>
```

### 解决

在 按钮事件修改为 `@click.stop` ，可阻止事件冒泡，不执行 外部 `div` 的事件

```
<div id="app" @click="show2">
    <input type="button" @click="show" value="弹出对话框1">
    <input type="button" @click.stop="show" value="弹出对话框2">
</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>
```

原文出处：http://malaoshi.top/show_1IX2bTHzcm3t.html