是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類被添加並緊接着刪除，導致此問題。

您可以在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全局變量。