J'ai cette étiquette :
<label><input type="checkbox"> I aggree to the <a href="terms">terms</a> and would like to continue</label>
Toutefois:
Le lien à l'intérieur de l'étiquette ouvre une base 5 révèlent le mode .
Cela fonctionne bien, mais le clic sur le lien permet également la case à cocher .
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>