読者です 読者をやめる 読者になる 読者になる

映画忘備録

映画を見た感想を、ひたすらメモっていくブログです。

VueJSのでイベント修飾子について

あんまり他のフレームワークなどでは使えない記法だからなのか、VueJSのイベント修飾子が便利なわりにはあんまり知られてない感じがするので、ここにメモっておく。

preventDefaultをイチイチJSの方に書きたくない場合

基本的な使い方はデフォルトイベントをキャンセルするお馴染みの「event.preventDefault()」と等価の「.prevent」で

function myClick(event) {
  event.preventDefault();
  
 ここから何か処理を書く
}

というのが

<a href="#" @click.prevent="myClick">ボタンです</a>

みたいな感じで書ける。

ただデフォルトの動作を止めたい場合

さらに例えば単純にデフォルトイベントを止めたいときは

<form @submit.prevent.stop></form>

とか書いておくとFORMのonSubmitイベントを止められる。

さらにstopPropagationも同様に使用できるため、イベントバブリングしてしまって予期せぬ動作をしてしまうような場合でも、

<div @click="myClick">
  <a href="#" @click.stopPropagation="childClick">親要素のmyClickにはイベント伝播しない</a>
</div>

というような感じで書くと、イベントバブリングを止められる。

加えてvueJSのv1.0.16からは

<a href="#" @click.self="myClink">ボタンです</a>

という感じで書くと、「event.targetが自分自身の場合の時のみイベントが発火する」というstopPropagationと似たような動作を設定できる。

広告を非表示にする