如何防止标签内的链接触发复选框？

我有这个标签：

 I agree to the https://stackoverflow.com/questions/24755802/how-to-prevent-a-link-inside-a-label-from-triggering-a-checkbox/terms and would like to continue 

但是，标签内部的链接打开了一个基础5揭示模态。 这工作正常，但点击链接也会选中复选框。

如何在单击链接时阻止选中复选框？

Answer 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（你需要在你想要关注的链接上设置一个id）

 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分别在同一窗口或新窗口中打开。

Answer 2

由于多个标签可以指向同一个复选框，因此您可以将文本修改为由两个标签（指向复选框）和中间的锚文本组成。

  I agree to the https://stackoverflow.com/questions/24755802/how-to-prevent-a-link-inside-a-label-from-triggering-a-checkbox/terms and would like to continue 

Answer 3

交互式元素中的交互元素会导致这样的function问题：未定义单击label元素内的元素时会发生什么，反之亦然。 为避免这种情况，请将a元素从label元素中取出，例如

 I agree to the https://stackoverflow.com/questions/24755802/how-to-prevent-a-link-inside-a-label-from-triggering-a-checkbox/terms and would like to continue 

要么

 I agree to the https://stackoverflow.com/questions/24755802/how-to-prevent-a-link-inside-a-label-from-triggering-a-checkbox/terms and would like to continue 

Answer 4

停止在链接上传播click事件。 这可以防止click事件冒泡到标签。

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

Answer 5

另一种内联方式：

   I aggree to the  https://stackoverflow.com/questions/24755802/how-to-prevent-a-link-inside-a-label-from-triggering-a-checkbox/terms  and would like to continue  

Answer 6

jQuery的：

 $('label a').each(function(){ var $this = $(this), span = $(''); span.html($this.clone()); $this.replaceWith(span); }); 

Answer 7

试试这个 。 这个对我有用

  I aggree to the https://stackoverflow.com/questions/24755802/how-to-prevent-a-link-inside-a-label-from-triggering-a-checkbox/terms and would like to continue 

Answer 8

 Try this..   I aggree to the https://stackoverflow.com/questions/24755802/how-to-prevent-a-link-inside-a-label-from-triggering-a-checkbox/terms and would like to continue