Під час мого випадкового тестування я побачив поведінку, коли я помістив прив'язувальний тег всередині іншого прив'язувального тегу. Я зробив jsfiddle .

<a class="groupPopper">
     <a class="name"> content</a>
</a>​

Але в інструменті розробника це виглядає інакше:

Я вважаю, що ми не можемо помістити прив'язувальний тег до іншого прив'язувального тегу, оскільки натискання на внутрішній прив'язує подію кліку до батьківського прив'язувального тегу, що не можна дозволяти.

Чи моє припущення правильне?

Як описує @ j08691, вкладені aелементи заборонені в синтаксисі HTML. У специфікаціях HTML не сказано, чому; вони просто підкреслюють правило.

З практичної сторони браузери ефективно застосовують це обмеження у своїх правилах аналізу, тому, на відміну від багатьох інших питань, порушення специфікацій просто не буде працювати. Аналізатори ефективно розглядають <a>стартовий тег всередині відкритого aелемента як неявне закінчення відкритого елемента перед запуском нового.

Отже, якщо ви пишете <a href=foo>foo <a href=bar>bar</a> zap</a>, ви не отримаєте вкладених елементів. Браузери аналізуватимуть його як <a href=foo>foo</a> <a href=bar>bar</a> zap, тобто як два послідовних посилання, за якими йде якийсь простий текст.

З вкладеними aелементами немає нічого нелогічного : вони можуть бути реалізовані таким чином, що натискання кнопки «foo» або «zap» активує зовнішнє посилання, натискання кнопки «bar» - внутрішнє посилання. Але я не бачу підстав використовувати таку структуру, і дизайнери HTML, ймовірно, теж не бачили такої, тому вирішили заборонити її і тим самим спростити речі.

(Якщо ви дійсно хотіли імітувати вкладені посилання, ви можете використовувати звичайне посилання як зовнішнє посилання та spanелемент із відповідним обробником подій як внутрішнє “посилання”. Або ж ви можете дублювати посилання:. <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>)

Вкладені посилання є незаконними.

Посилання та прив'язки, визначені елементом A, не повинні бути вкладеними; елемент A не повинен містити жодних інших елементів 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>

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

Ви можете використовувати тег об’єкта для вирішення цієї проблеми. як от

<a><object><a></a></object></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елементи.

Отже, за визначенням поведінка невизначена.

Для вкладених якорів, щоб внутрішня подія не піднімалася до зовнішньої події, потрібно зупинити розповсюдження, як тільки клацне внутрішня подія.

OnClick внутрішньої події, використовуйте e.stopPropagation ();

Не робіть так. Я зіткнувся з такою ж проблемою у своєму додатку. Ви можете просто додати <div>тег зверху та <a>теги на рівні дитини. щось на зразок:

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

переконайтеся, що ви також додали подію кліку для myDiv у свій файл сценарію.

window.location.href = "#dashboardDetails";

Ви не можете вкласти теги "a". Натомість встановіть зовнішній контейнер як 'position: relative', а другий 'a' як 'position: absolute' та збільште його значення z-index. Ви отримаєте той самий ефект.

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

Я знаю, що це стара публікація, але я хочу зазначити, що відповідь 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>

Це поганий спосіб кодування, але ви можете спробувати це -

<a href="1"> aaaa <table><tr> <td> <a href="2"> bbbb </a> </td></tr> </table> </a>