为什么我的点击事件在 jquery 中被调用两次? [英] Why is my click event called twice in jquery?

问题描述

为什么我的点击事件在 jquery 中被触发了两次?

Why is my click event fired twice in jquery?

HTML

<ul class=submenu>
    <li><label for=toggle><input id=toggle type=checkbox checked>Show</label></li>
</ul>

Javascript

$("ul.submenu li:contains('Show')").on("click", function(e) {
    console.log("toggle");
    if ($(this).find("[type=checkbox]").is(":checked")) console.log("Show");
    else console.log("Hide");
});

这是我在控制台中得到的:

This is what I get in console:

toggle                     menu.js:39
Show                       menu.js:40
toggle                     menu.js:39
Hide                       menu.js:41


> $("ul.submenu li:contains('Show')")
[<li>​                                            ]
    <label for=​"toggle">​
      <input id=​"toggle" type=​"checkbox" checked>​
      "Show"
    </label>​
</li>​

推荐答案

如果我没记错的话，我至少在某些浏览器上看到过这种行为，点击 label both 触发对 label 和 input 的点击.

If I remember correctly, I've seen this behavior on at least some browsers, where clicking the label both triggers a click on the label and on the input.

因此，如果您忽略 e.target.tagName 为 "LABEL" 的事件，您只会得到一个事件.至少，这是我在测试中得到的:

So if you ignore the events where e.target.tagName is "LABEL", you'll just get the one event. At least, that's what I get in my tests:

• 两个事件的示例 |来源
• 示例过滤掉e.target.tagName = "LABEL" |来源

这篇关于为什么我的点击事件在 jquery 中被调用两次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！