Création d'une balise d'ancrage à l'intérieur d'une balise d'ancrage

Question

Lors de mes tests aléatoires, j'ai vu un comportement où je mettais une balise d'ancrage à l'intérieur d'une autre balise d'ancrage. J'ai créé une balise jsfiddle .

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

Mais dans l'outil de développement, il apparaît différemment :

Je pense que nous ne pouvons pas mettre une balise d'ancrage à l'intérieur d'une autre balise d'ancrage car le fait de cliquer sur l'ancre intérieure fera remonter l'événement de clic vers la balise d'ancrage parente, ce qui ne devrait pas être autorisé.

Mon hypothèse est-elle correcte ?

Answer 1

Comme le décrit @j08691, les a sont interdits dans la syntaxe HTML. Les spécifications HTML ne disent pas pourquoi ; elles soulignent simplement la règle.

D'un point de vue pratique, les navigateurs appliquent effectivement cette restriction dans leurs règles d'analyse, de sorte que, contrairement à de nombreux autres problèmes, la violation des spécifications ne fonctionnera tout simplement pas. Les analyseurs traitent effectivement un <a> à l'intérieur d'une balise ouverte a comme mettant implicitement fin à l'élément ouvert avant d'en commencer un nouveau.

Ainsi, si vous écrivez <a href=foo>foo <a href=bar>bar</a> zap</a> vous n'obtiendrez pas d'éléments imbriqués. Les navigateurs l'interpréteront comme <a href=foo>foo</a> <a href=bar>bar</a> zap c'est-à-dire deux liens consécutifs suivis d'un texte en clair.

Il n'y a rien d'intrinsèquement illogique à imbriquer des a ils pourraient être implémentés de manière à ce qu'un clic sur "foo" ou "zap" active le lien extérieur, et qu'un clic sur "bar" active le lien intérieur. Mais je ne vois pas de raison d'utiliser une telle structure, et les concepteurs de HTML n'en voyaient probablement pas non plus, si bien qu'ils ont décidé de l'interdire et de simplifier ainsi les choses.

(Si vous vouliez vraiment simuler des liens imbriqués, vous pourriez utiliser un lien normal comme lien extérieur et un lien span avec un gestionnaire d'événement approprié comme "lien" interne. Vous pouvez également dupliquer les liens : <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a> .)

Answer 2

Les liens imbriqués sont illégaux.

Les liens et les ancres définis par l'élément A ne doivent pas être imbriqués ; un élément A ne doit pas contenir d'autres éléments A.

Answer 3

J'ai eu la même problème comme @thinkbonobo et a trouvé un moyen de le faire sans 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>

L'astuce consiste à créer une ancre couvrant l'ensemble de la .outer puis en attribuant à toutes les autres ancres de la division interne une valeur positive. z-index valeur. Tout le mérite en revient à https://bdwm.be/html5-alternative-nested-anchor-tags/

Answer 4

Vous pouvez utiliser la balise objet pour résoudre ce problème. par exemple

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

Answer 5

Je suis tombé sur ce problème alors que j'essayais de rendre un panneau div cliquable en y ajoutant des boutons. La solution que je recommande est d'utiliser les événements javascript.

Voici un exemple de codepen que j'ai créé.... http://codepen.io/thinkbonobo/pen/gPxJGV

Voici la partie html de ce document :

Exemple de lien intégré dans le lien ....

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

Remarquez que l'événement du lien interne est capturé et que la fonction stopPropagation() est utilisée. Ceci est essentiel pour s'assurer que le déclencheur externe ne s'exécute pas.