VUE的阻止冒泡事件
vue中的阻止冒泡事件可以帮助我们实现当子盒子被点击时，父盒子不被触发对应的点击事件。
1.click.stop()方法
<div class="boxParent" @click="Parent($event)"><div class="boxSon" @click="son($event)"></div>
</div>
.boxParent{width: 400px;height: 400px;background-color: pink;display: flex;justify-content: center;align-items: center;}.boxSon{width: 100px;height: 100px;background-color: orange;}
Parent(e){console.log(e.target,'父盒子被点击了')},son(e){console.log(e.target,'子盒子被点击了')}
当加了stop后，会发现点击子盒子时，不会触发父盒子的点击事件
<div class="boxParent" @click="Parent($event)"><div class="boxSon" @click.stop="son($event)"></div>
</div>
2.阻止事件冒泡的事件
（1）利用事件对象里面的e.stopPropagation()
Parent(e){console.log(e.target,'父盒子被点击了')
},
son(e){e.stopPropagation()console.log(e.target,'子盒子被点击了')
}
（2）IE6~8版本可使用事件对象的e.cancalBubble()
3.利用冒泡特性可做的优势：事件委托
给父节点设置一个事件，点击每个子节点就都会触发该事件
<ul class="ulStyle" @click="clickUl($event)"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
clickUl(e){console.log(e.target,'点击的是li，但li没有添加事件，事件冒泡到了ul，触发了ul的点击事件')
}
