Dürfen Sie einen Link innerhalb eines Links verschachteln?

Dies mag ziemlich einfach erscheinen. Dürfen Sie einen Link in einen Link einfügen? Siehe beigefügtes Bild unten:

Ich versuche, die gesamte graue Leiste anklickbar zu machen, um irgendwohin zu gelangen, aber wenn der Benutzer auf das Rad oder den Bewegungspfeil klickt, handelt es sich um andere Links. Siehe meinen aktuellen Code:

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

Ist das eine gute Praxis? Mache ich es falsch Wie würdest du das machen? Danke für die Hilfe!

Direkt aus dem W3C für HTML4:

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

Da die DTD das LINK-Element als leer definiert, sind LINK-Elemente möglicherweise auch nicht verschachtelt.

HTML 5

Und für HTML5 ist das etwas anders .

Sie können keinen interaktiven Inhalt in einem A-Element haben. Interaktiver Inhalt enthält Ankertags.

Um die Frage einfach zu beantworten: Nein.

Davon abgesehen ist hier eine reine HTML / CSS-Problemumgehung:

https://codepen.io/pwkip/pen/oGMZjb

.block {
  position:relative;
}

.block .overlay {
  position:absolute;
  left:0; top:0; bottom:0; right:0;
}

.block .inner {
  position:relative;
  pointer-events: none;
  z-index: 1;
}

.block .inner a {
  pointer-events: all;
}

<div class="block">
  <a class="overlay" href="#overlay-link"></a>
  <div class="inner">
    This entire box is a hyperlink. (Kind of)<br><br><br><br>
    <a href="#inner-link">I'm a W3C compliant hyperlink inside that box</a>
  </div>
</div>

Wickeln Sie Ihren verschachtelten Link in ein Objekt-Tag:

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <object><a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a></object>
    <object><a href="#" class="t_icons t_icons_move sp_mngt_move"></a></object>
</a>

Ich würde es so umgestalten, dass es eher diesem Format ähnelt:

<div class="sp_mngt_bar">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

Obwohl ich der ausgewählten Antwort voll und ganz zustimme und ja, sollten Sie keinen interaktiven Inhalt in einem A-Element haben. Manchmal benötigen Sie möglicherweise eine Problemumgehung.

Hier ist ein Beispiel , wo Sie benötigen ein interaktives Element in einem A - Tag zu setzen. Dieser kleine Schließknopf oben rechts.

Hier ist der HTML-Code dafür. (Es ist nicht der eigentliche Build, ich habe es etwas einfacher gemacht)

<a href="#">
    <span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
    <img src="images/camera.svg" width="50" alt="Camera" />
    <em>
        Upload a profile picture
        <small>
            Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
        </small>
    </em>
    <strong>
        + 25 K
    </strong>
</a>

Im Grunde wollen wir dieses Feld ausblenden, wenn der Benutzer auf das 'X' klickt. Ansonsten sollte es einfach wie ein einfaches A-Tag funktionieren. Hier ist die jQuery, die den Trick gemacht hat.

$('.hide').click(function(e) {
        e.preventDefault();
        e.stopPropagation(); // THIS IS THE KEY PART

        // DO WHATEVER YOU WANT, I FADED OUT THE BOX FOR EXAMPLE
        $(this).parent().fadeOut(300);

    });

Ich hoffe das hilft jemandem mit dem gleichen Problem. ;)

Verschachtelte Links sind illegal. Um dasselbe Verhalten wie bei verschachtelten Links zu erzielen, können Sie Folgendes tun:

Verwenden Sie das HTML-Format @mikevoermans wie unten gezeigt und binden Sie das Klickereignis

<div class="sp_mngt_bar">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a> 
</div>

Ihr Klickereignis sollte folgendermaßen aussehen:

$(".sp_mngt_bar").bind("click", function(e) {   
    var target = $(e.target);
    if(target.has('.t_icons_settings') { //Do something for settings } 
    else if(target.has('.t_icons_move') { //Do something for move }
    else { //Do something for sp_mngt_bar
});

Obwohl dies technisch gesehen keine Antwort auf die Frage ist, besteht eine andere Problemumgehung darin, das Klickereignis an ein spanoder zu binden div:

<a href="outer-link">
  Outer Link
  <span class='inner-link'>Inner Link</span>
</a>

$('.inner-link').click(function (e) {
    // Prevent the click-through to the underlying anchor
    e.stopPropagation();

    // Go to a link
    window.location.href = 'page.html';
    // Or call a javascript method
    doSomething();

    return false;
});

Eine Lösung besteht darin, eine Verknüpfung innerhalb des übergeordneten Verknüpfungscontainers absolut zu positionieren

<div style="position: relative">
  <a href="#">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <div id="placeholder" style="height: 24px">
  </a>
  <div style="position: absolute; bottom: 0">
    <a href="#"></a>
  </div>
</div>