jquery - 通过单击事件在元素内单击标签时避免 'double event'

Question

我有一些如下所示的 HTML:

<ul class="toggleList">
      <li><input type="checkbox" name="toggleCbx1" id="toggleCbx1" /><label for="toggleCbx1">Item 1</label></li>
</ul>

我正在使用 jquery 将单击事件附加到 LI，然后该事件将修改一些类并选中或取消选中其中的复选框。

我这样附加点击事件:

$("ul.toggleList li").click(function(){toggleStuff($(this));})

如果我单击 LI 中的任意位置，效果很好。但是，如果我单击 LI 中的 LABEL，我的单击事件将被调用两次。

这是为什么呢？我认为这与某种事件的爆发有关，对吗？

那么，是使用.triggerHandler的解决方案吗？我已经阅读了一些内容并查看了一些示例，但我不太了解设置它的正确语法。

附录:

Sam 指出了一个我认为可以解决问题的选项。这可能不是triggerHandler 问题。

似乎发生的情况是(默认情况下？)单击“标签”将弹出一个单击事件。解决方案似乎是检查事件是否由标签触发，如果是，则覆盖该事件。

做一些测试:

[...].click(function(evt){
        console.log(evt.target);
        if ($(evt.target).not("label")) {
            console.log("not label?");
            doMyThing($(this));
        }else{
            console.log("is label?");
        };

上面的方法不起作用。无论我点击 LABEL 还是其他元素，它都认为它不是标签。

奇怪的是，反转逻辑确实有效:

[...].click(function(evt){
        console.log(evt.target);
        if ($(evt.target).is("label")) {
            console.log("is label?");
        }else{
            console.log("not label?");
            doMyThing($(this));
        };

知道那是什么吗？我会做更多测试...

最终附录:

啊啊!用户错误。我错误地认为“.not”与“.is”相反。嗯，事实并非如此。 .is 进行比较并返回 bool 值。 .not 删除匹配的元素(因此返回对象)。

所以，我想人们总是必须检查 .is 并在测试“not is”时使用 else

Answer 1

我可以重现这个。至少有一个重复的事件调用似乎与标记上 for 属性的使用有关。

无论如何，如果您检查事件源 (event.target)，那么它应该忽略您收到的不需要的事件触发器:

$("ul.toggleList li").click(function (evt) {
        if ($(evt.target).is("li")) {
            toggleStuff($(this));
        }
    }
);

参见http://docs.jquery.com/Events/jQuery.Event#event.type了解更多信息。