webentwicklung-frage-antwort-db.com.de

Wie kann man verhindern, dass ein Link in einem Label ein Kontrollkästchen auslöst?

Ich habe dieses Label:

<label><input type="checkbox"> I agree to the <a href="terms">terms</a> and would like to continue</label>

Der Link innerhalb des Labels öffnet jedoch ein Fundament 5-Revier-Modal. Dies funktioniert gut, aber das Klicken auf den Link aktiviert auch das Kontrollkästchen.

Wie kann ich verhindern, dass das Kontrollkästchen aktiviert wird, wenn auf den Link geklickt wird?

javascriptjqueryhtmlcss
24
kevinius

Sie sollten nur ein Ereignis an den Link binden, der event.stopPropagation() und event.preventDefault() aufruft.

JQuery für alle Links in Labels:

$(document).on("tap click", 'label a', function( event, data ){
    event.stopPropagation();
    event.preventDefault();
    window.open($(this).attr('href'), $(this).attr('target'));
    return false;
});

Reines Javascript (Sie müssen eine ID für den Link setzen, dem Sie folgen möchten)

var termLink = document.getElementById('termLink');
var termClickHandler = function(event) {
    event.stopPropagation();    
    event.preventDefault();
    window.open(termLink.href, termLink.target);
    return false;
};
termLink.addEventListener('click', termClickHandler);
termLink.addEventListener('touchstart', termClickHandler);

Diese erwarten, dass das Linkziel auf _self oder _blank gesetzt ist, um sich in demselben Fenster bzw. in einem neuen Fenster zu öffnen. 

14
elvey

Da mehrere Beschriftungen auf dasselbe Ankreuzfeld verweisen können, können Sie den Text so ändern, dass er aus zwei Beschriftungen besteht (die auf das Ankreuzfeld zeigen) und dem Ankertext in der Mitte.

<input id="cb" type="checkbox">
<label for="cb">I agree to the</label>
<a href="#">terms</a>
<label for="cb">and would like to continue</label>

Wenn Sie die obige Technik anwenden, wirkt sich das Klicken auf den Link nicht auf den Status des Kontrollkästchens aus, der gesamte verbleibende Text jedoch.

10
Danield

Interaktive Elemente in interaktiven Elementen verursachen Funktionsprobleme wie diese: Es ist nicht definiert, was passiert, wenn Sie auf ein a-Element in einem label-Element klicken oder umgekehrt. Um dies zu vermeiden, entfernen Sie das a-Element aus dem label-Element, z.

<label><input type="checkbox">I agree</label> to the <a href="terms">terms</a>
and would like to continue

oder

<input type="checkbox" id="agree"><label for="agree">I agree</label> to the
<a href="terms">terms</a> and would like to continue
4
Jukka K. Korpela

Ein anderer Inline-Weg:

<label>
     <input type="checkbox"> 
     I aggree to the 
     <span  onclick="event.stopPropagation();">
          <a href="terms">terms</a>
     </span>
     and would like to continue
</label>
1
GlennG

Stoppen Sie die Weitergabe des Klickereignisses auf dem Link. Dadurch wird verhindert, dass das Klickereignis bis zum Etikett sprudelt.

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

1
i_like_robots

jQuery:

$('label a').each(function(){
    var $this = $(this),
        span = $('<span onclick="event.stopPropagation();"></span>');
    span.html($this.clone());
    $this.replaceWith(span);
});
0
Gynio

Versuche dies . Für mich geht das

<label><input type="checkbox"> I aggree to the <a href="terms" target="_blank" style="display: inline-block; z-index: 99999999999999999999; position: relative;">terms</a> and would like to continue</label>

0
gr-three