Vue はキャンセルイベントのバブリング動作を実装します

Vue では、イベントのバブリングは非常に一般的な動作ですが、場合によってはイベントのバブリング動作をキャンセルする必要があります。この記事では、Vue を使用してキャンセル イベントのバブリング動作を実装する方法を紹介します。

イベント バブリング

イベント バブリングとは、要素が特定のイベントをトリガーするときに、イベントが親要素によってキャプチャされるまでレイヤーごとにバブルアップします。たとえば、ボタン上でマウスをクリックすると、ボタンのクリック イベントがトリガーされ、次にその親要素のクリック イベントもトリガーされ、その後、上の要素のクリック イベントがトリガーされるまで、上の要素のクリック イベントがトリガーされます。 Document オブジェクトがトリガーされるか、イベントがキャンセルされるまで。

イベント委任を使用してイベントをインターセプトし、イベントが親要素にバブルアップするのを防ぐことができます。

イベントのバブリングのキャンセル

イベントが上位要素に渡されないように、イベントのバブリング動作をキャンセルする必要がある場合があります。 Vue では、イベント修飾子を使用してこれを実現できます。

Vue では、イベント修飾子はイベント名の後にサフィックスが付けられた特別なタグであり、イベントの動作を変更できます。このうち、.stop 修飾子は、イベントのバブリングを停止して、イベントが上位要素に渡されないようにすることができます。

サンプルコード:

<div @click.stop="divClickHandler">
  <button @click="btnClickHandler">Button</button>
</div>

この例では、ボタンがクリックされたときにボタンのクリックイベントがトリガーされますが、Vue ではイベントは上位の要素レイヤーにバブルアップします。レイヤーごとに。ただし、ボタンを含む div 要素に .stop 修飾子を追加したため、ボタンがクリックされたときに上向きにバブリングするのではなく、ボタンのクリック イベントのみがトリガーされます。

.stop 修飾子に加えて、使用できる他のイベント修飾子があります。たとえば、.prevent 修飾子はイベントのデフォルトの動作を防ぐことができ、.capture 修飾子はイベントが下位の要素からバブリングするのではなく、上位の要素からキャプチャを開始するようにすることができます。要素。

概要

Vue では、イベント修飾子を使用してイベントのバブリング動作をキャンセルすると非常に便利です。 .stop 修飾子はイベントのバブリングを停止でき、他の修飾子もより柔軟なイベント制御を実現できます。 Vue でイベントのバブリングを制御する必要がある場合、上記の方法を使用してそれを実現できます。

以上がVue はキャンセルイベントのバブリング動作を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。