html 标签是否停止传播？

Question

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

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");
}

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>

Answer 1

没有。正如我在 other answer 中解释的那样。由于 lable 标签的冒泡和冒泡，tog 函数被调用两次。因此 li 标签接连接收两个相同的事件，因此 active class 被连续添加和删除，导致了这个问题。

您可以在 fiddle 中使用警报检查此内容。

我们可以通过使用事件的 target property. Here is the 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 全局变量。

html 标签是否停止传播？

Is html label stopping propagation?

html

javascript

css

dom-events