VUE的阻止冒泡事件_vueclick阻止事件冒泡

VUE的阻止冒泡事件

vue中的阻止冒泡事件可以帮助我们实现当子盒子被点击时，父盒子不被触发对应的点击事件。

1.click.stop()方法

<div class="boxParent" @click="Parent($event)">
   <div class="boxSon" @click="son($event)">
   </div>
</div>
1
2
3
4

 .boxParent{
   	width: 400px;
    height: 400px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .boxSon{
    width: 100px;
    height: 100px;
    background-color: orange;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

 Parent(e){
  console.log(e.target,'父盒子被点击了')
 },
 son(e){
   console.log(e.target,'子盒子被点击了')
 }
1
2
3
4
5
6

当加了stop后，会发现点击子盒子时，不会触发父盒子的点击事件

<div class="boxParent" @click="Parent($event)">
   <div class="boxSon" @click.stop="son($event)">
   </div>
</div>
1
2
3
4

2.阻止事件冒泡的事件

（1）利用事件对象里面的e.stopPropagation()

Parent(e){
  console.log(e.target,'父盒子被点击了')
},
son(e){
  e.stopPropagation()
  console.log(e.target,'子盒子被点击了')
}
1
2
3
4
5
6
7

（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>
1
2
3
4
5
6
7

clickUl(e){
  console.log(e.target,'点击的是li，但li没有添加事件，事件冒泡到了ul，触发了ul的点击事件')
}
1
2
3