zoukankan      html  css  js  c++  java
  • 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. 当捕获存在时,先从外到里的捕获,剩下的从里到外的冒泡输出。

    如果这篇文章对您有帮助,您可以打赏我

    技术交流QQ群:15129679

  • 相关阅读:
    北大ACM 1008题—Maya Calendar
    C++ 输出彩色的控制台
    北大ACM 1003题—Hangover
    北大ACM 1009题—Edge Detection
    北大ACM 1004题—Financial Management
    北大ACM 1005题—I Think I Need a Houseboat
    Linux和win7双系统时间错误问题
    转化率极高的十个网站 怎样来提高转化率
    5次Shift粘滞键后门的应用
    单元测试基础知识
  • 原文地址:https://www.cnblogs.com/yeminglong/p/15165686.html
Copyright © 2011-2022 走看看