こんにちは！SCOUTERでフロントエンドエンジニアをしている匠平です。 SCOUTERではフロントエンドをVue.js(Nuxt.js)で開発しています。
Vue.jsのイベント修飾子の使いどころがいまいち掴めていなかったので、簡単な事例を挙げて理解していきたいと思います。
Vue.jsのイベント修飾子
イベント修飾子は以下の6種類があります。
.stop.prevent.capture.self.once.passive
公式ドキュメント イベント修飾子
中でも使用頻度が比較的多い.stopと.preventの使い方を見ていきましょう。
使い方と使いどころ
.stop
.stopはJavaScriptのstopPropagationを呼び出します。
現在のイベントのさらなる伝播 (propagation) を止めます。
Vue.jsのドキュメントには、親要素への伝搬を止める、とあります。Vue.jsのイベント修飾子.stopは、子要素のイベントが親のイベントを呼び出さない、ということを設定するわけですね。
<!-- クリックイベントの伝搬が止まります --> <a v-on:click.stop="doThis"></a>
.stopの動作サンプル
サンプルとして、彼女の実家の呼び鈴モデルを作りました。
実家住まいの彼女の家に訪問するとき、なるべく彼女のお父さんには会いたくないですよね。そんなときにこのイベント修飾子.stopが有効です。
buttonタグを押すと、彼女がお出迎えするアラートが表示されます。２つのbuttonタグはいずれもお父さん(fatherクラスを持ったdiv)に囲まれていて、同じようにクリックイベントを持っています。過保護なお父さんなんですかね。
普通に呼び鈴を押してしまうと、彼女のあとにお父さんも出てきてしまいます。お父さんを呼び出さないよう彼女に伝えておきましょう。
buttonのクリックイベントに.stopを与えてあげると、見事父親ブロックを回避することができました。
子要素に.stopを与えることで、親要素への伝搬を止めるという動作です。実生活でも活用していきたいですね。
.prevent
.preventはJavaScriptのEvent.preventDefaultメソッドを呼び出します。
Event インターフェースの preventDefault() メソッドは、イベントが明示的に処理されない場合に user agent に、そのデフォルトアクションを通常どおりに行うべきではないと伝えます。
.preventの動作サンプル
どのような場面で使うのか、こちらもサンプルで見ていきましょう。
フォームにテキストを入力してsubmit送信するとアラートが発動します。
上側のフォームで送信してアラートを閉じると、画面が更新されてフォーム内の文字列が消えてしまいます。これはそもそもsubmitがaction属性で画面遷移を想定しているからですね。
下側のフォームで送信してアラートを閉じても、フォームに入力した文字列はそのまま残ってるのが分かります。ここではフォームのsubmitに.preventを与えています。
意図しない画面遷移、画面更新を避けるため.preventが有効なんですね。
submitが成功したかどうかをモーダルやポップアップで表示したいことがあると思いますが、画面が切り替わって正しく動作しないことがあるので.preventが必要になります。
まとめ
.stopと.preventは使用頻度が多いので、これらの動作をしっかり覚えておきたいですね。
この記事がお役に立てれば嬉しいです。
最後に
SCOUTER社では私たちと一緒に働く仲間を募集中です！ ご興味のある方はぜひご応募ください！
