如何防止单击标签内的链接时选中复选框

通过将单击事件路由到onclick事件,可以取消单击事件。

“return false;”部分将阻止单击事件向上移动到标签。

<input type="checkbox" id="terms" name="terms" checked="checked" /> 
<label for="terms">I agree to be bound by the <a href="#" onclick="window.open('/terms','_blank');return false;">Terms</a></label>

允许打开链接的良好实践 target="_blank" 在新选项卡中。

/*
    Fix links inside of labels.
*/
$( 'label a[href]' ).click( function ( e ) {

    e.preventDefault();

    if ( this.getAttribute( 'target' ) === '_blank' ) {
        window.open( this.href, '_blank' );
    }
    else {
        window.location = this.href;
    }
});

为什么不把链接移到标签外?

<label for="terms">I agree to be bound by the</label> <a href="/terms">Terms</a>

只需添加“for”属性,它就可以防止不停的冒泡。

你可以在一个新窗口中打开链接,这样页面就不会改变。

如果您不想这样做,可以检查链接是否已被访问,然后自动选中该框。

我有一个类似的情况,但是当点击链接时会打开一个新窗口。这不会选中/取消选中该框。我认为这是因为点击不会通过标签链接冒泡。

因此,要扩展此链接,如果希望链接在同一页中打开,可以使用单击处理程序将其打开,并防止单击链接时出现冒泡,如下所示:

$('label a').click(function(ev) { ev.preventDefault(); window.location.href = $(this).attr('href'); }

(这是未经测试的,并不是JS的最佳用途,但它应该解决您的问题)

我同意(为了可用性和易用性)最好的方法是在新窗口中打开术语,但是如果您希望在同一窗口中打开术语,可以使用这个小功能:

function stopLabel(e) {
    e.preventDefault();
    window.location= '/terms';
}

你也可以直接把它们放进你的“onclick”里,但在我看来,这更好一点。

您还必须将事件传递给函数:

<label for="terms">I agree to be bound by the <a href="/terms" onclick="stopLabel(event);">Terms</a></label>

如果决定在新窗口中打开它,只需将window.location更改为window.open。

链接应该在标签之外,而不是标签的一部分,因为单击它将触发两个操作(打开链接并选中复选框)。

用户希望只触发一个操作, 如果链接看起来像一个他希望被带到链接目标的链接, 或者,如果文本与复选框相关,则用户希望选中该复选框。

如果你可以在一个新的选项卡中打开链接(我认为这样更好,因为用户可能已经在页面上填充了一些数据),那么即使没有JS也可以处理这个问题。

<input type="checkbox" id="agreed" />
<label for="agreed">
    I agree with <a href="/terms-of-use" target="_blank">Terms of use</a> and <a href="/privacy-policy" target="_blank">Privacy Policy</a>
</label>

下面是JS小提琴的例子

http://jsfiddle.net/davo3/zkcv3L3d/