javascript - 使用 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 代码:

复选框更改事件上的 eventListener

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

li click 事件上的 eventListener

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

请参阅下图以了解我想要实现的目标

当我点击蓝色区域时，待办事项应该淡出(复选框事件)。当我单击 li 的文本时，编辑屏幕应该切换。 (li 点击事件)
现在，当我单击蓝色区域时，li 事件被触发。所以待办事项淡出并显示编辑屏幕。

对于如何解决这个问题的任何建议，我将不胜感激!

Answer 1

编辑:如果您仅在文本上触发 click 事件(根据您的示例，这就是您所需要的)它可以工作:

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