在带有单击事件的元素中单击LABELS时,避免"双事件"

Question

我有一些看起来像这样的HTML:

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

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

我附上了click事件:

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

如果我点击LI中的任何位置,这可以正常工作.但是,如果我单击LI中的LABEL,我的click事件将被调用两次.

这是为什么？我认为这与某种事件起泡有关,对吗？

因此,使用.triggerHandler的解决方案是什么？我已经对它做了一些阅读并查看了一些示例,但我不太了解设置它的正确语法.

附录:

Sam指出了一个我认为会导致解决方案的选项.这可能不是triggerHandler问题.

似乎正在发生的事情是(默认情况下？)点击LABEL会使点击事件冒泡.解决方案似乎是检查事件是否由标签触发,如果是,则覆盖该标签.

做一些测试:

[...].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进行比较并返回一个布尔值..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.