时间戳

首页 > 解决方案 > 使用 e.stopPropagation() 时复选框更改事件冒泡到父 li 元素

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

问题描述

我添加了一个更改事件侦听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
}):
  1. li click事件上的eventListener
const li = document.querySelector('li');
li.addEventListener("click", e => {
     //code goes here
});

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

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

标签： javascripthtml

解决方案

编辑：如果您仅在文本上触发 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

推荐阅读