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

       

  • カテゴリー: Vue
  • Tags:
 この記事は約2分で読めます。
プログラミング
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
などがあります。

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

[blogcard url=”https://jp.vuejs.org/v2/guide/events.html]

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

 

 

       
   
コメントはまだありません

コメントを残す

jsファイルかvue呼び出す
Laravel
【最終手段】PHPでTwitterOauthを使ってTwitterに画像のアップロードをする方法

こんにちは、 私は、LaravelとVueでWebアプリを作成していますが TwitterOauth …

jsファイルかvue呼び出す
Vue
Vuejsで要素を画像に変更する方法!「html2canvas」を使用!

こんにちは、 Vue.jsでdivなどの要素をシェアさせたいと思い、 実際にやってみたら、かなり簡単 …

jsファイルかvue呼び出す
Vue
外部JavaScriptファイルからVueファイルのメソッド呼び出す方法!

こんにちは、 久しぶりのVue記事です。 今回は、外部のJavaScriptファイルから Vueファ …