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

Question

为什么我的click事件在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.

所以,如果你忽略了其中的事件e.target.tagName是"LABEL",你只得到了一个事件.至少,这是我在测试中得到的:

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

Answer 2

当input标记在标记内构造时会发生此行为label：

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

如果input复选框放在 外面label，使用id和for属性，click不会发生事件的多次触发：

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

Answer 3

我建议您在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的原始JS版本与IE的较早版本不兼容：

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

https://jsfiddle.net/rp6vsyh6/