aタグの中にaタグを入れたい

Question

下の図のようにリンクの中にリンクを入れて「HIKAKIN TV」という文字をクリックするとexample.com/videos/0001ではなくexample.com/users/hikakintvに飛ぶようにしたいのですが現状だと「HIKAKIN TV」をクリックするとexample.com/users/hikakintvとexample.com/videos/0001が両方開いてしまいます。（正確には一瞬はexample.com/users/hikakintvが表示されてその直後にexample.com/videos/0001に移動してしまう）
YouTubeのようにリンクの中にリンクを入れてもちゃんとした場所に移動できるようにするにはどうしたらいいのでしょうか。
ちなみにメインのリンク（example.com/videos/0001）はjQueryをクリックすると使って設定しています。

 jQuery(function($) {
    $('.card').css('cursor','pointer');
    $('.card').on('click',function () {
      window.location.href = $(this).find('.find').find('a').attr('href');
    });
  });

Comments

[Lhankor_Mhy]

HTMLコードをご提示ください。
「HIKAKIN TV」の部分についてイベントバブリングを止めればいいような気がしてます。

[m.ts10806]

想定のブラウザも追記してください

[退会済みユーザー]

<div class="stream-item">
<div class="content">
<div class="stream-item-header">
<%= link_to(user_path(post.user)) do %>
<%= image_tag current_user.profile_photo, class: "avatar avatar-size48 profile-photo" %>
<% end %>
<div class="user-profile-link">
<%= link_to "#{post.user.username}", user_path(post.user), class: "username" %>
<%= link_to "@" + "#{post.user.user_id}", user_path(post.user), class: "user-id" %>
</div>

<div class="find">
<%= link_to(post_path(post)) do %>
<div class="time">
・<%= time_ago_in_words(post.created_at) %>
</div>
<% end %>
</div>
</div>
<div class="post-text" id="link">
<%= raw safe_join(post.text.split("\n"), tag(:br)) %>
</div>
</div>
<div class="button-area">
<%= render partial: 'posts/posts', collection: @posts, as: :post %>
<div class = "comment-button"><%= image_tag 'comments.svg', class: 'comment-img',id: 'modal-open' %></div>
</div>
</div>
</div>

想定はGoogleChromeです

[m.ts10806]

質問は編集できます。
こちらに追記されてもデフォルト非表示であるため目につきにくいですし
マークダウンも使えません。

[m.ts10806]

普通のhtmlでなくてRailsですかね。
Rails直接関係ない内容でしたらブラウザに表示させたときのhtmlを提示された方が回答は得られやすくなります。

[Lhankor_Mhy]

「HIKAKIN TV」の部分は、このコードでいうとどこに当たりますか？

Answer 1

https://qiita.com/fukamiiiiinmin/items/7412b21c6df5de31cab1
などと先人が既にQiitaに挙げているので参考にされてはいかがでしょうか？

Comments

[退会済みユーザー]

タイトルが悪くてすみません
正確にはaタグの中にaタグを入れることはできているのですが中のaタグをクリックすると２つのaタグが反応してしまいます

[kyoya0819]

リンク先読みました？
aタグの中にaタグを入れることNGです。

[退会済みユーザー]

「そうすることでコンテンツ全体をaタグで囲い、その中にまたaタグを入れるようなレイアウトが出来るように成りました。」と書いてありますが...

[kyoya0819]

1番下です。

[退会済みユーザー]

他サイトではどのように実現しているのでしょうか？

[kyoya0819]

私は存じ上げません。
私が実装しているわけではないので、
ただ、ご自身で調べるときはYouTube以外のコードをお勧めします。

YouTubeは独自タグわんさかですから

Answer 2

既出の通り、a要素は入れ子に出来ない仕様です。
area要素で領域を分割して、目的の要素の外側にある複数のarea要素にリンクさせれば、実装できると思います。

ただ、ユーザ目線で見て、リンク領域が分かりづらいです。
「名前をクリックしたつもりで少しずれた部分(余りの領域)に触れてしまって動画ページに遷移してしまった」というエラー報告が増えるのは容易に想像できるので、要件を変える事を提案します。
「サムネイル画像、画像ラベル」をブロックボックスで括ってリンクすれば、リンク領域の境界がユーザに伝わりやすいUIになると思います。

Re: 365 さん

Answer 3

実際の案件で行ったので同じようなものがあったので回答。

ただ当時の案件はテキストではなく画像ボタンだったので、
下の二つが複数行になる場合は難しいです。

また、このサイズだとPCでは横に並んでいくものと仮定しています。

<section class="box">
  <ul>
    <li>
      <a href="">
        <dl>
          <dt>サムネ画像</dt>
          <dd><p>YouTuber～～略</p></dd>
        </dl>
      </a>
      <div>
        <strong><a href="">HIKAKIN TV</a></strong>
        <em>1回視聴<a href="">新着</a></em>
      </div>
    </li>
  </ul>
</section>

.box ul {
  display:flex;
}
.box ul li {
  border:/*枠線はここに指定*/;
}
.box ul li a dl {
  padding-bottom:/*divの内容が収まるように*/;
}
.box ul li div {
  position:relative;
  height:0;
}
.box ul li div strong,.box ul li div em {
  position:absolute;
}

細かい数値は省略しました。
.box ul li divの中はテキトーです。適切なタグ・クラス名は自身で決めてください。

Answer 4

aタグをネストさせるのではなく、後ろのaタグの代わりに背面いっぱいに広がるaタグを作ればいいんじゃないですか?
cssも作ってない雑なコードですが。

<input id="test1" value="test1"/>
<input id="test2" value="test2"/>

<a href="#test1" style="background-color:#ddd; height:50px; width:50px;display: block;"><a href="#test2" style="width:25px;height:25px;background-color:#FE4;display: block;" ></a></a>

/* 上記だと仕様でできない↓↓ */

<div style="background-color:#ddd; height:50px; width:50px; position:relative;">
  <a href="#test1" style=" height:100%; width:100%;display: block; position:absolute;" ></a>
  <a href="#test2" style="width:25px;height:25px;background-color:#FE4;display: block;position: relative; z-index: 2;" ></a>
</div>