logo标签列表

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

javascriptjqueryhtmlcss
35

我有这个标签：

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

然而，标签内的链接会打开基础5版本的reveal模态框。这个功能是正常的，但点击链接也会选中复选框。

我该如何防止在单击链接时选中复选框？

2
这可能与浏览器有关。在这个 fiddle 中（使用 chrome），我无法重现所描述的行为：http://jsfiddle.net/webtiki/ym6K7/。 - web-tiki
@kevinius — 我无法重现你的问题。点击链接不会选中复选框。要么这个问题是特定于浏览器的，要么取决于你已经拥有的某些JavaScript。我认为你需要在你的问题中添加更多细节（包括足够的代码来重现它）。 - Quentin
我刚在Chrome中进行了测试，但无法复现。 - adeneo
它会在单击标签文本时更改复选框的值。http://jsfiddle.net/9UNwG/ - Milind Anantwar
1
@kevinius — 当我这样做时，当我按住按钮时，复选框会改变颜色，但它从未被选中。 - Quentin
显示剩余4条评论
8个回答
28

你只需要将事件绑定到链接上，调用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，分别在相同窗口或新窗口中打开。

12

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

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

使用上述技巧，点击链接不会影响复选框的状态，但所有其余文本都会。

6

另一种内联方式：

<label>
     <input type="checkbox"> 
     I agree to the 
     <span  onclick="event.stopPropagation();">
          <a href="terms">terms</a>
     </span>
     and would like to continue
</label>
最优雅的解决方案 - pttsky
5
在交互元素内部添加交互元素会导致功能问题，例如，在label元素内单击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
1
0

试试这个。对我有效。

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

2
你的 z-index 值有点过高了。更好的 CSS 实践是使用尽可能低的 z-index 值来实现需求。理想情况下，如果标签文本没有设置 z-index 值，那么设置为 1 的 z-index 值就足够了。 - spasticninja
-1

jQuery：

$('label a').each(function(){
    var $this = $(this),
        span = $('<span onclick="event.stopPropagation();"></span>');
    span.html($this.clone());
    $this.replaceWith(span);
});
2
欢迎来到 Stack Overflow！请不要仅仅把你的源代码扔在这里。友好地尝试给出一个良好的描述，以便其他人会喜欢并点赞它。参见：如何撰写一个好的答案？ - sɐunıɔןɐqɐp
-1

请试一下这个...

 <label>
      <input type="checkbox" /> I agree to the <a href="terms">terms</a> and would like to continue
 </label>
标签在非XHTML doctype中不必是自闭合的，原帖作者的HTML是有效的。 - i_like_robots
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接