Während meiner zufälligen Tests habe ich ein Verhalten festgestellt, bei dem ich ein Ankertag in ein anderes Ankertag eingefügt habe. Ich habe eine Geige gemacht .

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

Im Entwicklertool sieht es jedoch anders aus:

Ich glaube, wir können kein Ankertag in ein anderes Ankertag einfügen, da durch Klicken auf den inneren Anker das Klickereignis zum übergeordneten Ankertag hochsprudelt, was nicht zulässig sein sollte.

Ist meine Annahme richtig?

Wie @ j08691 beschreibt, sind verschachtelte aElemente in der HTML-Syntax verboten. HTML-Spezifikationen sagen nicht warum; Sie betonen nur die Regel.

Auf der praktischen Seite setzen Browser diese Einschränkung in ihren Parsing-Regeln effektiv durch. Im Gegensatz zu vielen anderen Problemen funktioniert ein Verstoß gegen die Spezifikationen einfach nicht. Die Parser behandeln ein <a>Start-Tag in einem offenen aElement effektiv als implizites Beenden des offenen Elements, bevor ein neues gestartet wird .

Wenn Sie also schreiben <a href=foo>foo <a href=bar>bar</a> zap</a>, erhalten Sie keine verschachtelten Elemente. Browser analysieren es als <a href=foo>foo</a> <a href=bar>bar</a> zap, dh als zwei aufeinanderfolgende Links, gefolgt von einfachem Text.

Verschachtelte aElemente sind von Natur aus nicht unlogisch : Sie können so implementiert werden, dass durch Klicken auf "foo" oder "zap" der äußere Link und durch Klicken auf "bar" der innere Link aktiviert wird. Aber ich sehe keinen Grund, eine solche Struktur zu verwenden, und die HTML-Designer haben wahrscheinlich auch keine gesehen, also haben sie beschlossen, sie zu verbieten und dadurch die Dinge zu vereinfachen.

(Wenn Sie wirklich verschachtelte Links simulieren möchten, können Sie einen normalen Link als äußeren Link und ein spanElement mit einem geeigneten Ereignishandler als inneren „Link“ verwenden. Alternativ können Sie Links duplizieren : <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)

Verschachtelte Links sind illegal.

Vom A-Element definierte Links und Anker dürfen nicht verschachtelt sein. Ein A-Element darf keine anderen A-Elemente enthalten.

Ich hatte das gleiche Problem wie @thinkbonobo und habe einen Weg gefunden, dies ohne JavaScript zu tun:

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

Der Trick besteht darin, einen Anker zu erstellen, der das gesamte .outerDiv bedeckt , und dann allen anderen Ankern im inneren Div einen positiven z-indexWert zu geben. Das volle Guthaben geht an https://bdwm.be/html5-alternative-nested-anchor-tags/

Sie können das Objekt-Tag verwenden, um dieses Problem zu lösen. sowie

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

Ich bin auf dieses Problem gestoßen, als ich versucht habe, ein Div-Panel anklickbar zu machen, indem ich auch Schaltflächen habe. Die von mir empfohlene Problemumgehung besteht darin, Javascript-Ereignisse zu verwenden.

Hier ist ein Codepen-Beispiel, das ich erstellt habe ... http://codepen.io/thinkbonobo/pen/gPxJGV

Hier ist der HTML-Teil davon:

Beispiel eines in den Link eingebetteten Links ....

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

Beachten Sie, wie das Ereignis für den inneren Link erfasst und stopPropagation () verwendet wird. Dies ist wichtig, um sicherzustellen, dass der äußere Auslöser nicht ausgeführt wird.

Es ist ungültiges HTML.

Sie können keine aElemente verschachteln .

Per Definition ist das Verhalten also undefiniert.

Bei verschachtelten Ankern möchten Sie die Ausbreitung stoppen, sobald das innere Ereignis angeklickt wird, um zu verhindern, dass das innere Ereignis zum äußeren Ereignis aufsteigt.

Verwenden Sie beim Klicken auf das innere Ereignis e.stopPropagation ().

Mach es nicht so. Ich hatte das gleiche Problem in meiner App. Sie können einfach ein <div>Tag oben und <a>Tags auf untergeordneter Ebene hinzufügen . etwas wie:

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

Stellen Sie sicher, dass Sie in Ihrer Skriptdatei auch ein Klickereignis für myDiv hinzufügen.

window.location.href = "#dashboardDetails";

Sie können keine 'a'-Tags verschachteln. Setzen Sie stattdessen den äußeren Container als 'Position: relativ' und das zweite 'a' als 'Position: absolut' und erhöhen Sie seinen Z-Index-Wert. Sie erhalten den gleichen Effekt.

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

Ich weiß, dass es ein alter Beitrag ist, aber ich möchte darauf hinweisen, dass die Antwort von user9147812 besser funktioniert hat als alle anderen Vorschläge. So habe ich das Ganze gestapelt.

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

Dies ist eine schlechte Art der Codierung, aber Sie können dies versuchen -

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