Vueでaタグに@clickイベントを当てた時のページ遷移を無効化する方法

今回はVueでaタグに@clickイベントを設定する時にhrefの遷移先に遷移してしまう処理を無効化する方法を紹介します。

結論から言うと、@click.stop.preventと書けばokです（@click.prevent.stopでもok）。

<script setup>
const hello = () => alert('hello!');
</script>

<template>
  <div>
    <!-- ↓これはだめ -->
    <a href="#" @click="hello">クリックでメッセージを表示</a>

    <!-- ↓こう書く -->
    <a href="#" @click.stop.prevent="hello">クリックでメッセージを表示</a>
  </div>
</template>

.stopと.preventという2つの修飾子を繋げて書きます。

.stopはstopPropagation()と同じでイベントが親要素へ伝播するのを防ぎ、.preventはpreventDefault()と同じでイベントのデフォルトの動作を防ぎます。

この2つの修飾子をつけないと任意の処理ではなくaタグのデフォルトの動作であるページ遷移が発火してしまい、任意の処理が発火しない原因となってしまいます。

Vueでaタグに@clickイベントを入れる時はとりあえず.stop.preventしておけば大丈夫そうですね。

ZennでCSS設計の
本を書きました！