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

Question

我有这个标签:

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

但是，标签内的链接会打开一个 foundation 5 reveal modal。这工作正常，但单击链接也会选中复选框。

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

Answer 1

您应该只需要将事件绑定(bind)到调用 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 以分别在同一窗口或新窗口中打开。