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

Il s'agit d'un code HTML invalide.

Vous ne pouvez pas nicher a éléments.

Par définition, le comportement est donc indéfini.

Answer 2

Pour les ancres imbriquées, afin d'éviter que l'événement interne ne se répercute sur l'événement externe, vous souhaitez arrêter la propagation dès que l'événement interne est cliqué.

SurClick d'un événement interne, utiliser e.stopPropagation() ;

Answer 3

Je sais que c'est un vieux message, mais je tiens à souligner que la réponse de l'utilisateur 9147812 a mieux fonctionné que toutes les autres suggestions. C'est ainsi que j'ai empilé le tout.

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

Answer 4

Ne le faites pas comme ça. J'ai rencontré le même problème dans mon application. Vous pouvez simplement ajouter <div> en haut et <a> au niveau de l'enfant. quelque chose comme :

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

assurez-vous d'ajouter l'événement click pour myDiv dans votre fichier script également.

window.location.href = "#dashboardDetails";

Answer 5

Vous ne pouvez pas imbriquer les balises "a". Définissez plutôt le conteneur extérieur comme "position:relative" et le deuxième "a" comme "position:absolute" et augmentez sa valeur z-index. Vous obtiendrez le même effet.

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