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 上的点击<{1}}上的。

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

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的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/

Answer 3

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>事件的多次触发将会不会发生：

where

Answer 4

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

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

4 个答案: