jquery - 如何避免在没有 Javascript/jQuery 的情况下点击 中的 <input> 触发 上的点击事件？

Question

给定一些如下所示的 HTML:

<a><label><input type="checkbox" /></label>link text</a>

如何在不编码的情况下避免点击 input在 a 上触发点击事件的复选框？

我正在使用 label要放大复选框点击目标，出于不值得深入探讨的原因，我需要 input在a里面标签。我试过设置 z-index在 label 上和 input比 a 更高的值，但这没有区别。

我想到的唯一方法是跟踪 input正在检查，如果是，请忽略对 a 的点击(无论如何，我正在通过 jQuery 处理对 a 的点击)。这是一个完整的示例，包含 HTML、CSS 和 Javascript (jsFiddle --> http://jsfiddle.net/forgetcolor/wQEjk/ ):

HTML:

<a><label><input type="checkbox" /></label>link text</a>
<div id="output"></div>

CSS:

label {
    padding:5px 15px;
    border:1px solid blue;
}
a {
    padding:5px;
    border:1px solid red;
    background-color:#eee;
}

a:hover { background-color:#ddd; }
#output { margin: 10px; }

Javascript:

var checkboxclicked = false;

$('a').click(function() { 
    if(checkboxclicked) return;
    $('#output').text("link got click");
    setTimeout(function() {
        $('#output').text("");
    }, 500);
});

$('input, label').click(function() {
    checkboxclicked = true;
    setTimeout(function() {
        checkboxclicked = false;
    }, 250);
});

通过这个例子，我得到了我想要的——意思是在 label 的大目标内的任何地方点击标记仅触发对复选框的单击，而对 a 的单击在label之外触发对 a 的点击仅。

但我不禁想到有一种方法可以完全在 CSS 中完成此操作。有吗？

Answer 1

无法完全在 CSS 中完成此操作。您需要使用 stopPropagation 来防止事件冒泡到 a。

CSS 旨在描述网页的外观，而不是它的工作原理。