Ссылка внутри метки, также запускает флажок, как предотвратить?

У меня есть ярлык :

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

Однако:

Ссылка внутри метки открывает основание 5 показывает модальный.
Это отлично работает, но щелчок по ссылке также позволяет Флажок.

Как я могу предотвратить, чтобы это произошло?

ТНХ,

Ответ 1

Вам просто нужно привязать событие к ссылке, которая вызывает event.stopPropagation() и event.preventDefault()

JQuery для всех ссылок в метках:

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

Чистый javascript (вам нужно установить идентификатор в ссылке, за которой вы хотите следовать)

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

Они ожидают, что цель ссылки будет установлена на _self или _blank для открытия в том же окне или в новом окне соответственно.

Ответ 2

Поскольку несколько ярлыков могут указывать на один и тот же флажок, вы можете изменить текст, состоящий из двух меток (указывающих на флажок) и текста привязки в середине.

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

Ответ 3

Интерактивные элементы внутри интерактивных элементов вызывают такие функциональные проблемы: undefined что происходит, когда вы нажимаете элемент a внутри элемента label или наоборот. Чтобы избежать этого, удалите элемент a из элемента label, например.

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

или

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

Ответ 4

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

Ответ 5

Остановить распространение события клика по ссылке. Это предотвращает пузырьковое событие до метки.

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

Ответ 6

Другой встроенный способ:

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