Detailed introduction to the use of Vue event modifier capture-JS Tutorial-php.cn

Detailed introduction to the use of Vue event modifier capture

亚连

Release： 2018-06-14 15:46:41

Original

2450 people have browsed it

The function of the capture event modifier is to add a listener to the element. When the element bubbles, the element with this modifier is triggered first. This article introduces you to the use of the Vue event modifier capture. Friends who need it can refer to it

. The function of the capture event modifier uses the event capture mode when adding an event listener

That is to add a listener to the element. When the element bubbles, the element with this modifier is triggered first. If there are multiple modifiers, they will be triggered from outside to inside.

That is, whoever has the event modifier will be triggered first.

The code is as follows:

<!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>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

About ajax requests in jquery (detailed tutorial)

EventLoop issues in JavaScript

Questions about vue form validation in element

How to use the picture magnifying glass plug-in in vue2.x?

How to configure the loader in vue?

How to build a development environment using vue vuex koa2

How to implement data update using jquery ajaxform springboot

The above is the detailed content of Detailed introduction to the use of Vue event modifier capture. For more information, please follow other related articles on the PHP Chinese website!