html标签是否会停止传播？

Question

为什么当我在带有黑色边框的框内点击时，切换不会执行，但是当我点击外面时，它会，但不是复选框？

＆＃13;

＆＃13;

var checks = document.querySelectorAll("ul li");

for (var i = 0; i < checks.length; i++) {
  checks[i].addEventListener("click", tog);
};

function tog(e) {
  e.currentTarget.classList.toggle("active");
}

＆＃13;

ul li {
  background: #3CF;
  padding: 0.25em 0.5em;
  margin: 0.25em 0;
  display: block;
  cursor: pointer;
  text-indent: 1.5em;
}
ul li.active {
  background: #6EF;
}
label {
  display: block;
  width: 100px;
  border: 1px solid black;
}

＆＃13;

<ul>
  <li>
    <label>
      <input type="checkbox">1
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">2
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">3
    </label>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

没有。正如我在other answer中解释的那样。由于lable标记内外冒泡，tog函数称为两次。因此li标记一个接一个地接收两个相同的事件，因此active类被添加并背靠背地删除，从而导致此问题。

您可以在fiddle中使用提醒进行检查。

我们可以通过使用事件的target属性来解决此问题，以避免出现这种情况。这是fiddle，它可以按你的要求运作。

var checks = document.querySelectorAll("ul li");

for (var i = 0; i < checks.length; i++) {
  checks[i].addEventListener("click", tog);
};

var i = 0;
function tog(e) {
        if(e.target.tagName.toLowerCase() == 'label') {
            i++;  //if we remove this then i will never increment
            if(i%2 != 0) {
                i++;  //to bring back to even, so next click should work fine
                return;
            }
        }
  e.currentTarget.classList.toggle("active");
}

ul li {
  background: #3CF;
  padding: 0.25em 0.5em;
  margin: 0.25em 0;
  display: block;
  cursor: pointer;
  text-indent: 1.5em;
}
ul li.active {
  background: #6EF;
}
label {
  display: block;
  width: 100px;
  border: 1px solid black;
}

<ul>
  <li>
    <label>
      <input type="checkbox">1
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">2
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">3
    </label>
  </li>
</ul>

您可以通过使用IIFE返回函数处理程序或使用闭包来避免i全局变量。