Un lien dans une étiquette, déclenche la case à cocher, comment prévenir?

J'ai cette étiquette :

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

Toutefois:

Comment puis-je empêcher cela?

THX,

Vous devriez simplement lier un événement au lien qui appelle event.stopPropagation() et event.preventDefault()

JQuery pour tous les liens dans les étiquettes:

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

Pure javascript (vous devez définir un identifiant sur le lien que vous souhaitez suivre)

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

Ceux-ci s'attendent à ce que la cible de lien soit définie sur _self ou _blank pour ouvrir dans la même fenêtre ou une nouvelle fenêtre, respectivement.

Les éléments interactifs à l'intérieur des éléments interactifs provoquent des problèmes fonctionnels comme celui-ci: il est indéfini ce qui se produit lorsque vous cliquez sur a élément dans un élément d' label ou vice versa. Pour éviter cela, retirez l'élément à partir de l'élément de l' label , par exemple

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

ou

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

Étant donné que plusieurs étiquettes peuvent pointer vers la même case, vous pouvez modifier le texte pour qu'il s'agisse de deux étiquettes (pointant vers la case à cocher) et du texte d'ancrage au milieu.

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

Arrêtez la propagation de l'événement de clic sur le lien. Cela empêche l'événement de cliquer de bouillonner jusqu'à l'étiquette.

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

 Try this.. <label> <input type="checkbox" /> I aggree to the <a href="terms">terms</a> and would like to continue </label> 

Une autre manière en ligne:

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