使用 e.stopPropagation() 时，复选框更改事件会冒泡到父 li 元素

Question

我添加了一个更改事件侦听器input[type='checkbox']元素，但是即使我已经e.stopPropagation()在我的 JS 代码中包含了<li>元素器。

我的 HTML 结构：

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

需要注意的是，复选框元素不占用任何空间。相反，标签元素被自定义以创建自定义复选框。将 eventListener 添加到标签具有相同的效果。

我的JS代码：

1. 复选框更改事件上的 eventListener

const checkbox = document.querySelector(".checkboxContainer input");
checkbox.addEventListener("change", e => {
      e.stopPropagation();
      //rest of code goes here
}):

2. li 单击事件上的 eventListener

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

请参阅下图以了解我想要实现的目标 当我点击蓝色区域时，待办事项应该淡出（复选框事件）。当我点击 li 的文本时，编辑屏幕应该切换。（li 点击事件）现在，当我点击蓝色区域时，li 事件会被触发。所以待办事项淡出，编辑屏幕出现。

对于如何解决此问题的任何建议，我将不胜感激！

Answer 1

编辑：如果您仅在文本上触发单击事件（根据您的示例，这就是您所需要的），它会起作用：

const checkbox = document.querySelector(".checkboxContainer input");
const span = document.querySelector('.edit');

checkbox.addEventListener("change", e => {
	  console.log("only blue fade out")
});

span.addEventListener("click", e => {
		console.log("change text")
});

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

您面临的问题是您首先单击 li 上的事件。

一旦您更改复选框，您首先单击 li，因为这是父元素。

const checkbox = document.querySelector(".checkboxContainer input");

checkbox.addEventListener("change", e => {
    e.stopPropagation();
        console.log("checkbox")
});

const li = document.querySelector('li');
li.addEventListener("click", e => {
    console.log("li")
});

// Onchange Checkbox CONSOLE: 
li
checkbox

// Onclick li CONSOLE: 
li