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

不，正如我在其他答案中解釋的那樣。 由於進出的冒泡lable標簽時， tog函數被調用兩次。 因此li標簽一個接一個地接收兩個相同的事件，因此背靠背添加和刪除active類，從而導致此問題。

您可以檢查此小提琴與警報。

---

我們可以通過使用事件的 目標屬性來解決這個問題來避免這種情況。 這是按照您的要求工作的小提琴。

 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全局變量。