Introduction détaillée à l'utilisation de la capture du modificateur d'événement Vue-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-14 15:46:41

original

2464 Les gens l'ont consulté

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>

Copier après la connexion

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!