Javascript 当使用e.stopPropagation（）时，复选框change event冒泡到父li元素

我已经添加了一个更改事件监听器

input[type='checkbox']

元素，但即使我在JS代码中包含了

e.stopPropagation（）

，事件似乎会在

元素上的单击监听器中冒泡

我的HTML结构：

<li> 
  <label class="checkboxContainer">
  <input type="checkbox">
  <span class="checkmark"></span>
  </label>
Lorem ipsum
</li>

li click事件上的eventListener

请参见下图，了解我想要实现的目标 当我点击蓝色区域时，todo应该淡出（复选框事件）。当我点击li的文本时，编辑屏幕应该切换。（li click事件） 现在，当我单击蓝色区域时，会触发li事件。因此，待办事项淡出，编辑屏幕显示出来

---

我将非常感谢任何建议，我可以如何解决这个问题

我认为这是因为您停止传播的事件与在

li

事件处理程序中捕获的事件不同。这里有两个事件，更改和单击。只需将单击和更改添加到您的复选框事件侦听器中，它就会使其正常工作：

const checkbox=document.querySelector（“.checkboxContainer input”）；
复选框.addEventListener（“单击”，e=>{
e、 停止传播（）；
//剩下的代码在这里
})：

编辑：如果您仅在文本上触发单击事件（根据您的示例，这是您所需的全部），则它可以工作：

const checkbox=document.querySelector（“.checkboxContainer input”）；
const span=document.querySelector（'.edit'）；
复选框.addEventListener（“更改”，e=>{
console.log（“仅蓝色淡出”）
});
span.addEventListener（“单击”，e=>{
console.log（“更改文本”）
});

乱数假文
为什么要将事件同时附加到父项和子项？此代码位于todo项目的上下文中。更改事件触发li淡出。（aka completed）单击事件触发编辑弹出窗口以更改todo文本内容。您是对的，但是我如何更改代码，使复选框仍在li元素中？我编辑了我的答案，希望这对您有用。如果是的话，如果你能投票支持我的答案，那就太好了。祝你工作顺利。
const checkbox = document.querySelector(".checkboxContainer input");
checkbox.addEventListener("change", e => {
      e.stopPropagation();
      //rest of code goes here
}):

const li = document.querySelector('li');
li.addEventListener("click", e => {
     //code goes here
});