前回の記事では、.stop修飾子を使用してイベントの伝播を抑制する方法についてご紹介しました。
JavaScriptのイベントは、イベントが発生した要素のみではなく、要素が配置されている親の要素や、要素内に配置した子要素でも発生します。
今回の記事では、イベントの伝播を抑制する.stop修飾子に続いて、現在の要素（ユーザーの操作などでイベントが発生した要素）のみでイベントを処理するための.once修飾子について紹介します。
なお、JavaScriptのイベントの伝播については、以下の記事にまとめていますので参考にしてください。
動作を確認するためのサンプルコード
本記事では前回使用した以下のコードをもとに、.stop修飾子を指定した場合の動作を確認していきます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="app"> <div id="myParent" v-on:click="onClickParent"> 親要素 <div id="myElement" v-on:click="onClickMe"> 自要素 <div id="myChild" v-on:click="onClickChild"> 子要素 </div>vue-js-stop-modifier </div> </div> </div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Vue.createApp({ methods: { onClickParent: function(e) { console.log('親要素のclickイベントが発生'); }, onClickMe: function(e) { console.log('自要素のclickイベントが発生'); }, onClickChild: function(e) { console.log('子要素のclickイベントが発生'); }, } }).mount('#app') |
div要素が3階層で入れ子（ネスト）の状態で配置され、それぞれの要素のclickイベントにイベントハンドラーのメソッドがバインドしています。
上記のコードをブラウザーで実行すると、下位の要素（ネストの内側の要素）をクリックすると、上位の要素のクリックイベントも発生します。
v-onディレクティブの.self修飾子
.self修飾子は、v-onディレクティブでバインドしたイベントの伝播を制御し、イベントが発生した要素でのみイベントハンドラーを実行しますので、v-onディレクティブでバインドするイベントに続けて記載します。
.self修飾子の書式
.self修飾子は、v-onディレクティブを使用したイベントのバインド時に以下のように記載します。
|
1 |
<要素 v-on:イベント名.self="メソッド（式）"> |
.self修飾子の動作
.self修飾子をイベントに対して指定すると、event.targetが要素自身の時（event.target === event.currentTargetの場合）だけイベントハンドラが呼び出されます。
.self修飾子の実装例
以下にv-onディレクティブの.self修飾子を使用した実装の例（イベントの伝播を抑制する例）を示します。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="app"> <div id="myParent" v-on:click="onClickParent"> 親要素 <div id="myElement" v-on:click.self="onClickMe"> 自要素 <div id="myChild" v-on:click="onClickChild"> 子要素 </div> </div> </div> </div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Vue.createApp({ methods: { onClickParent: function(e) { console.log('親要素のclickイベントが発生'); }, onClickMe: function(e) { console.log('自要素のclickイベントが発生'); }, onClickChild: function(e) { console.log('子要素のclickイベントが発生'); }, } }).mount('#app') |
上記の例では、3階層で入れ子になった中間の要素（自要素）のclickイベントをバインドする際に.self修飾子を指定しています。
このコードを実行してブラウザーでページを表示し、各要素をクリックしてみると以下の結果がコンソールログに出力されます。
自要素をクリックした場合
|
1 2 |
自要素のclickイベントが発生 親要素のclickイベントが発生 |
子要素をクリックした場合
|
1 2 |
子要素のclickイベントが発生 親要素のclickイベントが発生 |
親要素をクリックした場合
|
1 |
親要素のclickイベントが発生 |
.self修飾子を指定したidがmyElementのdiv要素（自要素）では、自分自身の要素をクリックした時にはイベントが発生しますが、バブリングフェーズでイベントが発生するはずの子要素のクリックでは、イベントが発生しないことが確認できます。
補足
.self修飾子を指定しない場合のコンソールログの出力結果も掲載しておきますので、.self修飾子を指定した場合との違いをご確認ください。
自要素をクリックした場合
|
1 2 |
自要素のclickイベントが発生 親要素のclickイベントが発生 |
子要素をクリックした場合
|
1 |
子要素のclickイベントが発生 |
親要素をクリックした場合
|
1 |
親要素のclickイベントが発生 |