要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法

1. js 事件的三阶段

捕获阶段
目标阶段:执行当前对象的事件处理程序
冒泡阶段

2. js 阻止事件冒泡，捕获

阻止事件冒泡： event.stopPropagation() 或 event.cancelBubble = true (IE)
阻止浏览器默认行为： event.preventDefault()

3. vue 阻止事件冒泡，捕获

@click.stop : 阻止事件冒泡
@click.prevent : 阻止事件默认行为
@click.self : 事件只作用在元素本身，而不是其子元素

vue阻止事件冒泡

方法一：使用vue阻止子级元素的click事件冒泡。简单得：可以直接用stop

<div @click="test1()">    
    <span @click.stop="test2()">按钮1</span>    
    <span>按钮2</span> 
</div>

这样点击div里面的按钮1，就不会触发div绑定时间test1()方法

方法二：可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件:@click=“_stopPropagation($event)”

methods：{      
    _stopPropagation(ev){      
        var _this = this;      
        ev.stopPropagation();      
    },
}