当使用单击事件在元素中单击标签时，避免使用“双击事件”

I have some HTML that looks like this:

我有一些像这样的HTML:

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

I'm using jquery to attach a click event to the LI that will then modify some classes and check or uncheck the checkbox within.

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

I attach the click event as such:

我附上点击事件如下:

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

This works fine if I click anywhere in the LI. However, if I click on the LABEL within the LI, my click event is called twice.

如果我点击LI中的任何地方，这都没问题。但是，如果我单击LI中的标签，我的单击事件将被调用两次。

Why is that? I think it's related to some sort of event bubling-up, correct?

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

As such, is the solution to use .triggerHandler? I've done some reading on it and looked at some examples but I don't quite understand the proper syntax for setting it up.

因此，使用.triggerHandler的解决方案是什么?我已经读了一些关于它的文章，也看了一些例子，但是我不太理解设置它的正确语法。

ADDENDUM:

附录:

Sam pointed out an option that I think leads to the solution. This maybe isn't a triggerHandler issue.

萨姆指出了一个选项，我认为可以引出解决方案。这可能不是一个triggerHandler问题。

What appears to be happening is that (by default?) clicking on a LABEL will bubble-up a click event. The solution appears to be to check to see if the event was triggered by the label and, if so, over-ride that.

似乎正在发生的事情是(默认情况下)点击一个标签将会弹出一个点击事件。解决方案似乎是检查事件是否是由标签触发的，如果是的话，就会超出这个范围。

Doing some testing:

做一些测试:

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

The above doesn't work. Whether I click on the LABEL or another element, it thinks it's not the label.

以上是行不通的。无论我点击标签还是其他元素，它都认为它不是标签。

Oddly, reversing the logic does work:

奇怪的是，颠倒逻辑确实有效:

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

Any idea what that is? I'll do more testing...

知道那是什么吗?我将做更多的测试……

FINAL ADDENDUM:

最后补充:

Argh! User error. I, erroneously, assumed '.not' did the opposite of '.is'. Well, that's not true. .is does a comparison and returns a boolean. .not removes elements that matches (and therefore returns objects).

啊!用户错误。我错误地假定”。not做了与.is相反的事。这不是真的。is做一个比较并返回一个布尔。。not删除匹配的元素(因此返回对象)。

So, I guess one always has to check for .is and use an else when testing for 'not is'

所以，我想在测试'not is'的时候一定要检查。is和使用else

1 个解决方案

#1

I can reproduce this. At least one of the duplicate event calls seems to be related to the use of the for attribute on the tag.

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

Regardless, if you check the source of the event (event.target) then it should ignore the unwanted event triggers you're receiving:

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

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

See http://docs.jquery.com/Events/jQuery.Event#event.type for more info.

有关更多信息，请参见http://docs.jquery.com/Events/jQuery.Event#event.type。

#1