Vue事件符.capture的含义用法

vue事件符的.capture用法，含义是捕获。

先看一个4层结构的div盒子：div(最外层) > div(爷爷) > div(父亲) > div(儿子)

 

 

 

 

<template>
  <div>
    <div @click="handleCatch('最外层')">
      最外层
      <div @click="handleCatch('抓到了爷爷')">
        抓到了爷爷
        <div @click="handleCatch('抓到了父亲')">
          抓到了父亲
          <div @click="handleCatch('抓到了儿子')">抓到了儿子</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  methods: {
    handleCatch(msg) {
      console.log(msg)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

 

 

 

 点击最里层儿子,则会冒泡打印输出，输出为

 

 

 

 

 

现在给@click添加.capture修饰符

 

 

 

 

一、首先添加单个.capture给每层盒子，点击“儿子”看效果

<div @click="handleCatch('最外层')">
      最外层
      <div @click="handleCatch('抓到了爷爷')">
        抓到了爷爷
        <div @click.capture="handleCatch('抓到了父亲')">
          抓到了父亲
          <div @click="handleCatch('抓到了儿子')">抓到了儿子</div>
        </div>
      </div>
    </div>

 

 点击“儿子”看效果

 

 

 2. 给爷爷加

<div @click="handleCatch('最外层')">
      最外层
      <div @click.capture="handleCatch('抓到了爷爷')">
        抓到了爷爷
        <div @click.capture="handleCatch('抓到了父亲')">
          抓到了父亲
          <div @click="handleCatch('抓到了儿子')">抓到了儿子</div>
        </div>
      </div>
    </div>

 点击“儿子”看效果

 

 

 3. 给最外层加

 

<div @click.capture="handleCatch('最外层')">
      最外层
      <div @click.capture="handleCatch('抓到了爷爷')">
        抓到了爷爷
        <div @click.capture="handleCatch('抓到了父亲')">
          抓到了父亲
          <div @click="handleCatch('抓到了儿子')">抓到了儿子</div>
        </div>
      </div>
    </div>

 

 

 

 

点击“儿子”看效果

 

 

 

总结：

     1. 冒泡是从里往外冒，捕获是从外往里捕。

     1. 当捕获存在时，先从外到里的捕获，剩下的从里到外的冒泡输出。