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

過去にこのような記事を記しました。

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

こんにちは。早速ですが、 Vue.jsの親要素と子要素のクリックなどのイベントを併発しない方法を書いていきます。簡単な説明としては、親要素にクリックイベントをつけ、子要素にもクリックイベントをつけたときに子要素をクリックした際...

イベントハンドリングのイベント修飾子の「self」を記すと
自身の関数しか呼び出さないという内容をご紹介しました。

公式ドキュメントを読むと、他にもたくさんの修飾子があります。

イベントハンドリング — Vue.js

Vue.js - The Progressive JavaScript Framework

今回はその中でstop修飾子について記します。

イベント修飾子「stop」が便利
子要素イベント着火時に親要素のイベントを実行しない方法
おわりに

イベント修飾子「stop」が便利

selfは、クリックイベント等が子要素に伝搬せず、
自身の要素のみで実行することが可能です。

ですが、特定の要素だけ伝播しないようにしたいというときに不便です。
これを実現するためにstop修飾子があります。

そして、テーマにあるよう
子要素イベント着火時に親要素のイベントを実行しないことも「stop」によって実現可能です。

子要素イベント着火時に親要素のイベントを実行しない方法

前述したとおり、「stop」修飾子を使用します。

<div @click="parent()">
 <button @click.stop="child()">ボタン</button>
 <p>名前</p>
 <p>年齢</p>
 <p>メールアドレス</p>
</div>
<script setup>
const parent = () =>{
 console.log("別のページに遷移する処理...");
}
const child = () =>{
 console.log("いいねを送る処理...");
}
</script>

上のコードは、
ユーザ情報として、ユーザ情報内にあるボタンを押すと「いいね」。
それ以外の部分をクリックすると、画面遷移することができます。

このように、
他の関数を実行したくない要素に、「stop」修飾子をつけます。

そのため、p要素の名前、年齢、メールアドレスをクリックすると
親要素同様、画面遷移します。

逆に、親要素クリック時のみ実行したい場合は、「self」を使うべきでしょう。