Vue イベント修飾子キャプチャの使用方法の詳細な紹介-jsチュートリアル-php.cn

Vue イベント修飾子キャプチャの使用方法の詳細な紹介

亚连

リリース： 2018-06-14 15:46:41

オリジナル

2398 人が閲覧しました

キャプチャイベント修飾子の機能は、要素にリスナーを追加することです。要素がバブルすると、この修飾子を持つ要素が最初にトリガーされます。この記事では、Vue イベントモディファイアキャプチャの使い方を紹介しますので、必要な方は参考にしてください

キャプチャイベントモディファイアの機能は、イベントリスナーを追加するときにイベントキャプチャモードを使用することです

。 element のリスナー。要素がバブルすると、この修飾子を持つ要素が最初にトリガーされます。複数のモディファイアがある場合、それらは外側から内側にトリガーされます。

つまり、イベント修飾子を持つ人が最初にトリガーされます。

コードは次のとおりです:

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

ログイン後にコピー

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立つことを願っています。

jqueryのajaxリクエストについて(詳細なチュートリアル)

JavaScriptのEventLoopの問題について

要素のvueフォーム検証の問題について

vue2.xの画像虫眼鏡プラグイン？

vueでローダーを設定するにはどうすればよいですか?

vue+vuex+koa2を使った開発環境の構築方法

jquery+ajaxform+springbootを使ったデータ更新の実装方法

以上がVue イベント修飾子キャプチャの使用方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。