为什么我的点击事件在jquery中调用两次？ [英] Why is my click event called twice in 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 
显示menu.js：40 
 toggle menu.js：39 
隐藏menu.js：41 
 
 
> $（ul.submenu li：contains（'Show'））
 [< li>] 
< label for =toggle> 
< input id =toggletype =checkboxchecked> 
显示
< / label> 
< / li> 
  
 
 
解决方案
如果我记得正确，我至少在一些浏览器上看到这种行为， 标签  触发点击标签  输入。
 
 
 
因此，如果忽略 e.tTarget.tagName 是LABEL，你只会得到一个事件。至少，这是我在测试中得到的：
 
 
 
 
 
 两个事件的示例 | 来源 
 
 
 示例过滤出 e.target.tagName =LABEL个 来源 
 
 
 
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>​

解决方案
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.

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


Example with both events | Source
Example filtering out the e.target.tagName = "LABEL" ones | Source


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