Разрешено ли вставлять ссылку внутри ссылки?

Ответ 1

Прямо от W3C для HTML4:

12.2.2 Вложенные ссылки являются незаконными

Связи и привязки, определенные элементом A, не должны быть вложенными; элемент A не должен содержать никаких других элементов A.

Поскольку DTD определяет, что элемент LINK является пустым, элементы LINK могут также не вставляться.

HTML 5

И для HTML5 он немного отличается.

У вас не может быть Интерактивный контент внутри элемента A. Интерактивный контент содержит теги привязки.

Ответ 2

Чтобы просто ответить на вопрос: Нет.

Это, как говорится, здесь чистый обходной путь HTML/CSS:

https://codepen.io/pwkip/pen/oGMZjb

.block {
  position:relative;
}

.block .overlay {
  position:absolute;
  left:0; top:0; bottom:0; right:0;
}

.block .inner {
  position:relative;
  pointer-events: none;
  z-index: 1;
}

.block .inner a {
  pointer-events: all;
}

<div class="block">
  <a class="overlay" href="#overlay-link"></a>
  <div class="inner">
    This entire box is a hyperlink. (Kind of)<br><br><br><br>
    <a href="#inner-link">I'm a W3C compliant hyperlink inside that box</a>
  </div>
</div>

Ответ 3

Оберните свою вложенную ссылку внутри тега объекта:

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <object><a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a></object>
    <object><a href="#" class="t_icons t_icons_move sp_mngt_move"></a></object>
</a>

Ответ 4

Я бы переделал его так, чтобы он был больше похож на этот формат:

<div class="sp_mngt_bar">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

Ответ 5

Хотя я полностью согласен с выбранным ответом и да, у вас не должно быть Interactive Content внутри элемента A, иногда вам может понадобиться обходной путь.

Вот пример, где вам нужно поместить интерактивный элемент внутри тега A. Эта маленькая кнопка закрытия в правом верхнем углу.

Здесь HTML для этого. (Это не фактическая сборка, я сделал ее немного проще)

<a href="#">
    <span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
    <img src="images/camera.svg" width="50" alt="Camera" />
    <em>
        Upload a profile picture
        <small>
            Here the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
        </small>
    </em>
    <strong>
        + 25 K
    </strong>
</a>

Итак, в основном мы хотим скрыть это поле, когда пользователь нажимает на "X". В противном случае, он должен работать как простой тег A. Здесь jQuery, который сделал трюк.

$('.hide').click(function(e) {
        e.preventDefault();
        e.stopPropagation(); // THIS IS THE KEY PART

        // DO WHATEVER YOU WANT, I FADED OUT THE BOX FOR EXAMPLE
        $(this).parent().fadeOut(300);

    });

Я надеюсь, что это поможет кому-то с той же проблемой.;)

Ответ 6

Вложенные ссылки являются незаконными. Для достижения такого же поведения, как и для вложенных ссылок, вы можете сделать следующее:

Использовать HTML-формат @mikevoermans, как показано ниже, и связать событие click

<div class="sp_mngt_bar">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a> 
</div>

Ваше событие click должно выглядеть следующим образом:

$(".sp_mngt_bar").bind("click", function(e) {   
    var target = $(e.target);
    if(target.has('.t_icons_settings') { //Do something for settings } 
    else if(target.has('.t_icons_move') { //Do something for move }
    else { //Do something for sp_mngt_bar
});

Ответ 7

Хотя технически это не ответ на вопрос, другой обходной путь - привязать событие click к span или div:

<a href="outer-link">
  Outer Link
  <span class='inner-link'>Inner Link</span>
</a>

$('.inner-link').click(function (e) {
    // Prevent the click-through to the underlying anchor
    e.stopPropagation();

    // Go to a link
    window.location.href = 'page.html';
    // Or call a javascript method
    doSomething();

    return false;
});

Ответ 8

Одним из решений является абсолютное позиционирование ссылки внутри контейнера родительской ссылки

<div style="position: relative">
  <a href="#">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <div id="placeholder" style="height: 24px">
  </a>
  <div style="position: absolute; bottom: 0">
    <a href="#"></a>
  </div>
</div>