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

【问题标题】：How to prevent a link inside a label from triggering a checkbox?如何防止标签内的链接触发复选框？
【发布时间】：2014-09-05 12:09:58
【问题描述】：

我有这个标签：

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

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

如何防止点击链接时复选框被选中？

【问题讨论】：

这可能与浏览器相关在这个小提琴中（使用 chrome）我无法重现所描述的行为：jsfiddle.net/webtiki/ym6K7
@kevinius — 我无法重现您的问题。单击该链接不会选中该复选框。问题要么是特定于浏览器的，要么取决于您已经拥有的一些 JavaScript。我认为您需要为您的问题添加更多细节（包括足够的代码来重现它）
我也刚刚在 Chrome 中测试过，无法重现
在上面的小提琴中，当你点击链接上的“并按住”时，你会看到这会触发复选框。
@kevinius — 当我这样做时，当我按住按钮时复选框会改变颜色，但它永远不会被选中。

标签： javascript jquery html css

【解决方案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 以分别在同一窗口或新窗口中打开。

【讨论】：

【解决方案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】：

交互元素内的交互元素会导致如下功能问题：当您单击a 元素内的a 元素或反之亦然时会发生什么，这是未定义的。为避免这种情况，请将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】：

另一种内联方式：

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

【讨论】：

最优雅的解决方案

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

试试这个。它对我有用

&lt;label&gt;&lt;input type="checkbox"&gt; I aggree to the &lt;a href="terms" target="_blank" style="display: inline-block; z-index: 99999999999999999999; position: relative;"&gt;terms&lt;/a&gt; and would like to continue&lt;/label&gt;

【讨论】：

你的 z-index。这太过分了。更好的 CSS 实践是使用尽可能低的 z-index，这将起作用。理想情况下，如果标签文本上没有 z-index，则 z-index 为 1 应该可以工作。

【解决方案7】：

jQuery:

$('label a').each(function(){
    var $this = $(this),
        span = $('<span onclick="event.stopPropagation();"></span>');
    span.html($this.clone());
    $this.replaceWith(span);
});

【讨论】：

欢迎来到 Stack Overflow！请不要把你的源代码扔在这里。友善一点，并尝试对您的答案进行漂亮的描述，以便其他人会喜欢并支持它。见：How do I write a good answer?

【解决方案8】：

请试试这个……

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

【讨论】：

标签在非 XHTML 文档类型中不必是自闭合的，原始海报的 HTML 是有效的。