recherche

Maison >interface Web >js tutoriel >Introduction détaillée à l'utilisation de la capture du modificateur d'événement Vue

Introduction détaillée à l'utilisation de la capture du modificateur d'événement Vue

亚连
亚连original
2018-06-14 15:46:412456parcourir

La fonction du modificateur d'événement de capture est d'ajouter un écouteur à l'élément Lorsque l'élément bouillonne, l'élément avec ce modificateur est déclenché en premier. Cet article vous présente l'utilisation du modificateur d'événement Vue. Les amis qui en ont besoin peuvent s'y référer

La fonction du modificateur d'événement de capture Utiliser le mode de capture d'événement lors de l'ajout d'écouteurs d'événement

C'est-à-dire. pour ajouter un écouteur à l'élément Lorsque l'élément bouillonne, l'élément avec ce modificateur est déclenché en premier. S'il y a plusieurs modificateurs, ils seront déclenchés de l'extérieur vers l'intérieur.

C'est-à-dire que celui qui possède le modificateur d'événement sera déclenché en premier.

Le code est le suivant : 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>.capture事件修饰符</title>
  <style type="text/css">
    * {
      margin: 0 auto;
      text-align: center;
      line-height: 40px;
    }
    p {
      width: 100px;
    }
    #obj1 {
      background: deeppink;
    }
    #obj2 {
      background: pink;
    }
    #obj3 {
      background: hotpink;
    }
    #obj4 {
      background: #ff4225;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="content">
  <p id="obj1" v-on:click.capture="doc">
    obj1
    <p id="obj2" v-on:click.capture="doc">
      obj2
      <p id="obj3" v-on:click="doc">
        obj3
        <p id="obj4" v-on:click="doc">
          obj4
          <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
          由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
          -->
        </p>
      </p>
    </p>
  </p>
</p>
<script type="text/javascript">
  var content = new Vue({
    el: "#content",
    data: {
      id: &#39;&#39;
    },
    methods: {
      doc: function () {
        this.id = event.currentTarget.id;
        alert(this.id)
      }
    }
  })
</script>
</body>
</html>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

À propos de la requête ajax dans jquery (tutoriel détaillé)

Problèmes concernant EventLoop en JavaScript

Problèmes concernant la validation du formulaire vue dans element

Comment utiliser le plug-in loupe d'image dans vue2.x ?

Comment configurer le chargeur dans vue ?

Comment créer un environnement de développement en utilisant vue+vuex+koa2

Comment implémenter la mise à jour des données en utilisant jquery+ajaxform+springboot

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：vue+storejs gère l'obtention des donnéesArticle suivant：vue+storejs gère l'obtention des données

Articles Liés

Voir plus