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

为什么我的click事件在jquery中被触发了两次？

HTML

 
Show
  

使用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')") [
​ ] ​ ​ "Show" ​ 
​ 

Answer 1

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

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

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

Answer 2

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

 Show 

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

 Show  

Answer 3

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

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

https://jsfiddle.net/ssrboq3w/

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

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

https://jsfiddle.net/rp6vsyh6/