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

プログラミング Vue
こんにちは。

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

簡単な説明としては、

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

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

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

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

 
A,イベント名の後に、 「.self」をつけるだけ!
 
スポンサーリンク

簡単に例を書くと、

<div v-on:click="メソッド">
//親要素    
  
<div v-on:click="メソッド2">//子要素
      XXXX
   </div>
</div>
↑上記の方法だと、
子要素をクリックした時に
  • メソッド1
  • メソッド2
どちらも実行してしまいます。

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

<div v-on:click.self="メソッド">
//親要素 

<div v-on:click="メソッド2">//子要素
      XXXX
   </div>
</div>
このようにselfをつけることで
子要素をクリックした時に
  • メソッド2
しか呼び出されなくなります。

かなり楽に実装できますね。
さすがです。
ちなみに、
@はv-on:の略なので@click.selfでもOKです。
イベント修飾子は、他にも
  • stop
  • prevent
  • capture
  • self
  • once
  • passive
などがあります。

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



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

 

 

コメント

タイトルとURLをコピーしました