「Vue.js」子要素と親要素のクリック イベントを併発しない方法！

こんにちは。

早速ですが、
Vue.jsの親要素と子要素のクリックなどのイベントを併発しない方法を書いていきます。

簡単な説明としては、

親要素にクリックイベントをつけ、子要素にもクリックイベントをつけたときに
子要素をクリックした際、親要素と子要素どちらのイベントを起こしてしまいます。

これを解決するために、
イベント修飾子をつける必要があります。

(Vue.jsってここまで楽にできるんだと思うぐらい簡単です。）

親要素と子要素のイベントを併発しないための方法

A,イベント名の後に、　「.self」をつけるだけ！

簡単に例を書くと、

↑上記の方法だと、
子要素をクリックした時に

• メソッド1
• メソッド2

どちらも実行してしまいます。

親要素に「.self」をつけます。

このようにselfをつけることで
子要素をクリックした時に

• メソッド2

しか呼び出されなくなります。

かなり楽に実装できますね。
さすがです。
ちなみに、
@はv-on:の略なので@click.selfでもOKです。

イベント修飾子は、他にも

• stop
• prevent
• capture
• self
• once
• passive

などがあります。

詳しくは、公式ドキュメントをご覧ください。

最後まで読んでいただきありがとうございました。

特定の要素を除いた全て親要素の関数を実行したい場合

以下をご参照ください。
「stop」修飾子を使います。

「Vue.js」子要素イベント着火時に親要素のイベントを実行しない方法。

過去にこのような記事を記しました。 イベントハンドリングのイベント修飾子の「self」を記すと 自身の関数しか呼び出さないという内容をご紹介しました。 公式ドキュメントを読むと、他にもたくさんの修飾子があります。 今回はそ...

hasethblog.com

2023.04.11