リンク内にあるボタン要素でページ遷移しないようにしたい

Question

前提

Vue.jsを使用して記事投稿サービスを開発しています。

記事一覧ページを以下のスクリーンショットのデザインで作っており、赤く囲ってある範囲が記事詳細ページへのリンクになっています。
リンクの中にいいねボタンがあり、それをクリックされた場合はページ遷移せずいいねの投稿だけがされるようにしたいのですが、現状だといいねが投稿されると同時に記事詳細へ遷移してしまいます。

実現したいこと

Twitter等のイメージで、いいねボタンをクリックされた場合はページ遷移はせず、いいねが投稿されいいねボタンの色が変わるようにしたいです。
解決法をご存じの方がいましたら、ご回答お願いします。

該当のソースコード

↓ArticleCard.vue(記事の要素)

<template>
  <router-link :to="{name: 'articleDetail', params: { articleId: article.id }}" class="flex flex-col w-full bg-white py-4 px-4 rounded-xl shadow-sm">
    <div class="article-card-header flex h-8">
      <router-link :to="{name: 'userHome', params: {userId: article.user_id}}" class="icon h-full">
        <img src="@/assets/icon-sample.png" class="h-full object-contain">
      </router-link>
      <div class="flex-col justify-start leading-4 text-sm ml-2">
        <router-link :to="{name: 'userHome', params: {userId: article.user_id}}" class="font-medium">{{ article.user_name }}</router-link>
        <p class="text-gray-500">{{ article.created_at | moment }}</p>
      </div>
    </div>
    <div class="article-card-body flex justify-between mt-1">
      <h2 class="text-xl font-bold">{{ article.title }}</h2>
      <div class="flex items-end justify-end">
        <LikeButton
          :isLiked="article.is_liked"
          :articleId="article.id"
          @deleteLike="$emit('deleteLike', article.id)"
          @createLike="$emit('createLike', article.id)"
        />
        <LikeCount :like_count="article.like_count" />
      </div>
    </div>
  </router-link>
</template>

↓LikeButton.vue(いいねボタン要素)

<template>
  <button>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.923 45.209" v-if="isLiked" @click="$emit('deleteLike')" class="w-4">
      <path id="favorite" d="M27.652,49.759l-2.947-2.652A210.528,210.528,0,0,1,9.115,31.546Q3.25,24.885,3.25,17.871a12.94,12.94,0,0,1,3.8-9.49,12.72,12.72,0,0,1,9.4-3.831,13.93,13.93,0,0,1,5.924,1.356,14.012,14.012,0,0,1,5.275,4.539A17.745,17.745,0,0,1,33.1,5.906,13.37,13.37,0,0,1,48.341,8.381a12.888,12.888,0,0,1,3.831,9.49q0,7.014-5.894,13.645T30.717,47.107Zm.059-23.341Zm-.059,8.745c5.934-5.5,10.718-1.76,14.353-5.709s5.452-7.81,5.452-11.582c0-2.515,1.611,7.015,0,5.4s1.3,3.142-1.179,3.142c-1.925,0-1.444,3.88-3.133,5.1S37.2,36.848,36.1,39.127H18.8C17.738,36.848,6.461,22.387,5.884,19.255s5.564-6.319,3.717-6.319c-2.515,0,2.343-2.865.751-1.254s6.16-5.816,6.16-3.3c0,3.772-6.739,17.123-3.124,21.072S21.758,29.662,27.652,35.163Z" transform="translate(-3.25 -4.55)" fill="#ea3f60"/>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.923 45.209" v-else @click="$emit('createLike')" class="fill-blue-500 w-4">
      <path id="favorite" d="M27.652,49.759l-2.947-2.652A210.528,210.528,0,0,1,9.115,31.546Q3.25,24.885,3.25,17.871a12.94,12.94,0,0,1,3.8-9.49,12.72,12.72,0,0,1,9.4-3.831,13.93,13.93,0,0,1,5.924,1.356,14.012,14.012,0,0,1,5.275,4.539A17.745,17.745,0,0,1,33.1,5.906,13.37,13.37,0,0,1,48.341,8.381a12.888,12.888,0,0,1,3.831,9.49q0,7.014-5.894,13.645T30.717,47.107Zm.059-23.341Zm-.059,17.211q8.9-8.252,14.353-14.176t5.452-11.582a8.271,8.271,0,0,0-8.547-8.606,9.1,9.1,0,0,0-5.423,1.827A13.55,13.55,0,0,0,29.3,16.339H26.061a12.876,12.876,0,0,0-4.185-5.246,9.2,9.2,0,0,0-5.364-1.827,8.281,8.281,0,0,0-6.16,2.417,8.436,8.436,0,0,0-2.387,6.189q0,5.659,5.423,11.582T27.652,43.629Z" transform="translate(-3.25 -4.55)" fill="#707070"/>
    </svg>
  </button>
</template>

試したこと

button要素をdivで囲ってみましたが特に挙動に変化はありませんでした。

Answer 1

バブリングを防ぐため.stopを付けてみてはどうでしょうか、

          @createLike.stop="$emit('createLike', article.id)"
          @deleteLike.stop="$emit('deleteLike', article.id)"

Comments

[alison]

ご回答ありがとうございます！
そもそもバブリングという概念を知らなかったので助かりました🙏