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

为什么我的点击事件在jquery中激发了两次？为什么我的点击事件在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>

来源

2013-10-25 shuji

只有当我在这里尝试时才会触发http://jsfiddle.net/LRjUc/ –

@DominicGreen：这取决于是否哟ü点击标签或复选框（或“li”）。如果你点击标签，那么至少在Chrome上，你会得到两个事件。 –

是的，有点难以看到，但如果您选择控制台上的最后一段文字，则可以在此之后看到两次激发的事件。 – shuji

如果我没有记错，我已经看到了至少有一些这种行为浏览器，点击label均为触发input上的label和的点击。

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

Example with both events | Source
Example filtering out the e.target.tagName = "LABEL" ones |如果input复选框被置于外label，通过使用id和for属性，多个点火
```
<label for="toggle"><input id="toggle" type="checkbox" checked>Show</label> 
```
：Source

来源

2013-10-25 16:36:22

是的，你是对的。我也可以仅为复选框触发事件，如$（“ul.submenu li：contains（'Show borders'）[type = checkbox]”）on（“click”，callback）; ，非常感谢您的回答。 – shuji

@shuji：嗯，好吧，我以为你因为某个特定的原因将它挂在'li'上。 :-) –

不是，这只是这是我第一次对我的菜单使用复选框，所以我被用来直接绑定到李。 – shuji

当input标签的label标签内的结构就会发生此现象click事件不会发生：

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

来源

2015-07-26 01:03:14 bigT

我建议您在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香草JS版本，它不能与旧版本的IE浏览器的兼容：

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

https://jsfiddle.net/rp6vsyh6/

来源

2017-11-24 12:23:18 Patch92

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

回答

相关问题