checkbox - 为什么我的点击事件在 jquery 中被调用了两次？

Question

为什么我的点击事件在 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");
});

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

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>​

Answer 1

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

因此，如果您忽略 where e.target.tagNameis的事件"LABEL"，您只会得到一个事件。至少，这就是我在测试中得到的：

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

Answer 2

我建议您使用只会触发一次的change事件。input[type="checkbox"]因此，作为上述问题的解决方案，您可以执行以下操作：

$("#toggle").on("change", function(e) {
  if ($(this).is(":checked"))
    console.log("toggle: Show");
  else
    console.log("toggle: Hide");
});

https://jsfiddle.net/ssrboq3w/

querySelector与旧版本 IE 不兼容的 vanilla JS 版本：

document.querySelector('#toggle').addEventListener('change',function(){
  if(this.checked)
    console.log('toggle: Show');
  else
    console.log('toggle: Hide');
});

https://jsfiddle.net/rp6vsyh6/

Answer 3

input当标签在标签内结构化时会发生此行为label：

<label for="toggle"><input id="toggle" type="checkbox" checked>Show</label>

如果inputcheckbox放在外面label，使用idandfor属性，click就不会发生多次触发事件：

<label for="toggle">Show</label>
<input id="toggle" type="checkbox" checked>

Answer 4

我发现当我在多次调用的代码中的某个位置定义了单击（或更改）事件时，就会发生此问题。将定义移动到单击事件以准备好文档，您应该已准备就绪。