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

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

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

Ответ 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>