Где установить тег на баннер с текстовым контейнером [дубликат]

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

Использовать 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
});

Вот чистое решение html / css:

HTML

<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>

CSS

.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;
}

https://codepen.io / pwkip / ручка / oGMZjb

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

<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>

Хотя я полностью согласен с выбранным ответом и да, вы не должны иметь интерактивный контент внутри элемента 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's 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);

    });

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

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

<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>