【Q&A】.preventの挙動は??【JavaScript】

こんにちは、@codeship_techです。

本日の質問がこちら。

vueのclickアクションなどに.prevent をつけた時とつけない時では何が違いますか?

ということで、JavaScriptについての質問ですね。

実際にvueのClickアクションに.preventをつけた時とつけない時でこのように記述が変わりますが、挙動ではどのような変化があるのでしょうか?

prevent付けた時:

<a v-on:click.prevent="doThis"></a>

prevent付けない時:

<a v-on:click="doThis"></a>

それではこちらの質問に答えていきます。

.preventはJavascriptの構文のEvent.preventDefaultメソッドが実行されます。

Event.preventDefaultはhtmlをjavascriptで扱うdomで、デフォルトで発動するアクションを無効化してくれます。

そもそもデフォルトで発動するアクションとは

  • aタグ」での「click」した時、aタグのherfで指定されたURLへ遷移する
  • formのチェックボックス」での「click」時、チェックボックスのオン/オフが切り替わる
  • inputタグの「submit」での「click」された時、actionで指定されたURLへ遷移+データ送信

などです。

これらのデフォルトのアクションを無効化してくれるのが、Event.preventDefaultになります。

本日は、vueのclickアクションに.preventをつけた時の挙動について解説しました。