質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

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

addyson
alison

総合スコア24

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

0クリップ

156閲覧

投稿2022/11/11 17:11

前提

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

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

実現したいこと

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

該当のソースコード

↓ArticleCard.vue(記事の要素)

javascript

1<template> 2 <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"> 3 <div class="article-card-header flex h-8"> 4 <router-link :to="{name: 'userHome', params: {userId: article.user_id}}" class="icon h-full"> 5 <img src="@/assets/icon-sample.png" class="h-full object-contain"> 6 </router-link> 7 <div class="flex-col justify-start leading-4 text-sm ml-2"> 8 <router-link :to="{name: 'userHome', params: {userId: article.user_id}}" class="font-medium">{{ article.user_name }}</router-link> 9 <p class="text-gray-500">{{ article.created_at | moment }}</p> 10 </div> 11 </div> 12 <div class="article-card-body flex justify-between mt-1"> 13 <h2 class="text-xl font-bold">{{ article.title }}</h2> 14 <div class="flex items-end justify-end"> 15 <LikeButton 16 :isLiked="article.is_liked" 17 :articleId="article.id" 18 @deleteLike="$emit('deleteLike', article.id)" 19 @createLike="$emit('createLike', article.id)" 20 /> 21 <LikeCount :like_count="article.like_count" /> 22 </div> 23 </div> 24 </router-link> 25</template>

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

javascript

1<template> 2 <button> 3 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.923 45.209" v-if="isLiked" @click="$emit('deleteLike')" class="w-4"> 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"/> 5 </svg> 6 <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"> 7 <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"/> 8 </svg> 9 </button> 10</template>

試したこと

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

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

js

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

投稿2022/11/11 23:57

qnoir

総合スコア7910

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

addyson

2022/11/12 12:12

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。