单击<li>背景、复选框和标签时触发事件

Question

你好，我知道周围很少有几乎相同的问题，但我找不到给出答案的解决方案，所以我第一次在这里发帖。

我有一个简单的li和标签里面

<li class="task">
    <input type="checkbox" id="task-1" />
    <label for="task-1">Random text></label>
</li>

我的触发"done"类的jQuery是：

$(".task").click(function (e) {
    var cb = $(this).find(":checkbox")[0];
    if (e.target != cb) cb.checked = !cb.checked;
    $(this).toggleClass("done", cb.checked);
});

当点击复选框或li背景时，这实际上很好，但当点击标签时就不起作用了。

我的另一个jQuery可以在点击复选框和标签时工作，但不能在后台工作：

$(".task input").change(function () {
    $(this).closest('.task').toggleClass('done', $(this).is(':checked'));
});

如何创建jQuery，当点击li的复选框、标签或背景时激活事件？感谢您，并对在张贴过程中出现的任何错误表示歉意。

Fiddle：https://jsfiddle.net/0j7e69o1/2/

Answer 1

这是因为标签具有默认的单击功能，这意味着它将焦点放在具有在其for属性中引用的ID的元素上。当你点击时，它就在做这件事。

您可以删除for属性来修复此问题，如本例所示：

https://jsfiddle.net/0j7e69o1/3/

首选：另一个解决方案是使用javascript:防止默认点击

$('.tasks label').click(function(e) { e.preventDefault(); } );

在这里，我们将一个点击事件绑定到tasks元素中的每个标签，并使用preventDefault()（更多信息）来阻止默认事件的发生。这是首选，因为它会让你的标记保持其有用的for属性不变！

https://jsfiddle.net/0j7e69o1/5/