小编Pie*_*000的帖子

我添加了一个更改事件侦听器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 事件会被触发。所以待办事项淡出，编辑屏幕出现。

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