vue イベント修飾子は一度キャプチャを停止し、パッシブを防ぎます。

stop は、クリックイベントが伝播し続けるのを防ぎ、バブリングを防ぎます。

Capture イベントリスナーを追加する場合は、イベントキャプチャモードを使用し、子要素はキャプチャ修飾子を追加して親要素のイベントをトリガーし、子要素のイベントロジックを処理します。

Once イベントは 1 回だけトリガーされます

self は、それ自身の要素である場合にのみイベント処理をトリガーし、その子要素が間接的にトリガーする場合はトリガーしません。

Prevent は、ラベルをクリックするとジャンプしますが、Prevent 修飾子を追加するとジャンプしなくなるなど、デフォルトの動作を防ぎます。

パッシブはデフォルトの動作を妨げません。一般的な理解によれば、このイベントにはデフォルトの動作があることを事前にブラウザに伝えた場合、ブロックされません。ブラウザを心配する必要はなく、直接イベントをトリガーする必要はありません (コードは書き込まれません）。

具体的な結果を確認するコードを作成する

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box-outer {
      width: 200px;
      height: 200px;
      border: 1px solid #000fff;
    }
    .box-inner {
      margin: 50px auto;
      width: 100px;
      height: 100px;
      background-color: #c9c0c9;
    }
  </style>
  <body>
    <div id="app">
        <!-- 外层盒子 -->
      <div class="box-outer" @click="clickOuter">
        <!-- 内层盒子 -->
        <div class="box-inner" @click="clickInner">
            <!-- a标签 -->
            <a @click="clickA" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js">跳转</a>
        </div>       
      </div>
    </div>
    <script type="module">
      import Vue from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js";

      const vm = new Vue({
        name: "HelloWorld",
        el: "#app",       
        methods: {
            clickOuter() {
            console.log('outer');
          },
          clickInner() {
            console.log('inner');
          },
          clickA() {
            console.log('a标签');
          },
        },
      });
    </script>
  </body>
</html>

1. 修飾子を追加しない場合、ラベルをクリックするとジャンプし、内側のボックスをクリックすると最初に clickInner がトリガーされます。

もう一度外側をクリックしてトリガーします

2. aタグにprevent修飾子を付けると、クリックがジャンプせず、デモも行われなくなります。

3. Once 修飾子を追加すると、イベントは 1 回だけトリガーされます

4. 外側のボックスに .self を追加します。内側のボックスをクリックすると内側のボックスのコールバックのみがトリガーされ、外側のボックスはコールバックをトリガーしません。

<div class="box-outer" @click.self="clickOuter">

5. イベントのバブリングを防ぐために、内部ボックスに .stop を追加します。内部ボックスをクリックすると、内部ボックスのイベントコールバックのみがトリガーされ、外部ボックスのイベントコールバックはトリガーされません。外部ボックスの自己を削除した後でもトリガーします)

 <!-- 外层盒子 -->
   <div class="box-outer" @click="clickOuter">
        <!-- 内层盒子 -->
        <div class="box-inner" @click.stop="clickInner">
          <!-- a标签 -->
          <a
            @click="clickA"
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js"
            >跳转</a
          >
        </div>
   </div>

6. 外側のボックスにキャプチャ修飾子を追加し、最も内側のボックスを追加するようにコードを変更し、クリックされたときに情報を出力するクリックイベントを追加します。

最も内側のボックスをクリックすると、キャプチャ修飾子を持つ外側のボックスのイベントコールバックが最初にトリガーされ、続いてそれ自体がトリガーされ、最後にキャプチャモディファイアーのない外側のボックスが順番にバブルアップすることがわかります。

 <div class="box-outer" @click.capture="clickOuter">
        <!-- 内层盒子 -->
      <div class="box-inner" @click="clickInner">
          <!-- a标签 -->
          <!-- <a
            @click="clickA"
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js"
            >跳转</a
          > -->
          <div class="box-iin" @click="clickIin">最内层盒子</div>
      </div>
  </div>

click.prevent.selfのように連続して修飾子を追加することもできますが、順序が重要ですので使用する際には注意してください。

vue イベント修飾子は一度キャプチャを停止し、パッシブを防ぎます。

おすすめ