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

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

я наткнулся на эту проблему при попытке сделать панель div кликабельной также есть кнопки. Обходной путь, который я рекомендую, заключается в использовании событий javascript.

вот пример codepen, который я создал.... http://codepen.io/thinkbonobo/pen/gPxJGV

вот его html-часть:

пример ссылки, встроенной в ссылку....

<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
  If you say run<br>
  <button onclick="app.hitMe(event)">more</button><br>
  <br>
  And if you say hide...<br>
</div>

обратите внимание, как захватывается событие для внутренней ссылки и используется stopPropagation (). Это важно убедиться, что внешний триггер не запускается.

это недопустимый HTML.

вы не можете гнездо a элементы.

таким образом, по определению, поведение не определено.

не делай так. Я столкнулся с той же проблемой в моем приложении. Вы можете просто добавить <div> тег в верхней части и <a> теги на уровне ребенка. что-то вроде:

<div id="myDiv"><a href="#"></a>
     <a href="#"></a>
</div>

убедитесь, что вы также добавили событие click для myDiv в свой файл сценария.

window.location.href = "#dashboardDetails";

вы не можете вложить теги 'a'. Вместо этого установите внешний контейнер как ' position: relative 'и второй' a 'как' position:absolute ' и увеличьте его значение z-индекса. Вы получите тот же эффект.

<div style="position:relative">
<a href="page2.php"><img src="image-1.png"></a>
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>

вы можете использовать тег объекта для решения этой проблемы. например,

<a><object><a></a></object></a>

для вложенных якорей, чтобы предотвратить всплывание внутреннего события до внешнего события, вы хотите остановить распространение, как только щелкнуто внутреннее событие.

OnClick внутреннего события, используйте e. stopPropagation ();

Я знаю, что это старый пост, но я хочу отметить, что ответ user9147812 работал лучше, чем любые другие предложения. Вот как я сложил все это.

    <style>
    * {
      padding: 0;
      margin: 0 border:0;
      outline: 0;
    }

    .outer_anchor {
      display: inline-block;
      padding: 5px 8px;
      margin: 2px;
      border: 1px solid #252632;
      border-radius: 3px;
      background: #1c1d26;
      color: #fff;
      text-shadow: 0 1px 0 #616161;
      box-shadow: 1px 1px 3px #000;
      transform: translateY(0);
      transition: background 250ms;
    }
    .inner_anchor {
      display: inline-block;
      padding: 5px 8px;
      margin: 2px;
      border: 1px solid #252632;
      border-radius: 3px;
      background: #1c1d26;
      color: #fff;
      transform: translate(0px);
    }
    .inner_anchor:hover {
      background: #647915;
    }
    </style>


<a href="#">ItemX<object><a class="elim_btn" href="#" title='Eliminate'>&times;</a></object></a>

Я тот же вопрос как @thinkbonobo и нашел способ сделать это без JavaScript:

.outer {
  position: relative;
  background-color: red;
}
 
.outer > a {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
 
.inner {
  position: relative;
  pointer-events: none;
  z-index: 1;
}
 
.inner a {
  pointer-events: all;
}

<div class="outer">
  <a href="#overlay-link"></a>
  <div class="inner">
    You can click on the text of this red box. It also contains a
    <a href="#inner-link">W3C compliant hyperlink.</a>
  </div>
</div>

фокус в том, чтобы сделать якорь, охватывающий весь .outer div, затем давая всем другим якорям во внутреннем div положительный z-index значение. Полный кредит идет на https://bdwm.be/html5-alternative-nested-anchor-tags/

Это плохой способ кодирования, но вы можете попробовать это -

aaaa

bbbb