为什么当第二个“else if”条件满足时，第一个“if”会自己激活？

Question

基本上，当满足条件“

event.target === checkbox && active

”时，“

active

”的值就变成“

false

”。因此，下次单击该复选框将满足第一个条件“

event.target === checkbox && !active

”，这就是我想要的。然而，一旦满足条件“

event.target === checkbox && active

”，并且执行代码块，第一个“

if

”语句的代码块也会自动执行。结果，‘

active

’获取了值“

false

”，然后立即再次恢复为“

true

”的值。这基本上可以防止单击复选框时取消选中该复选框，这是我不想要的。您知道如何防止这种情况发生吗？为什么会发生这种情况？

有代码：

function toggleSelectionMenu(checkbox, menu) {
  let active = false;
  document.addEventListener('click', function (event) {
    if (event.target === checkbox && !active) {
      checkbox.checked = true;
      menu.style.display = 'block';
      active = true;
      console.log(active);

    } else if (event.target !== checkbox && active || event.target === checkbox && active) {
      checkbox.checked = false;
      menu.style.display = 'none';
      active = false;
      console.log(active);
    }
  });
}

我想要的是，第一次单击复选框会执行第一个“

if

”语句中所描述的操作，并且 DOM 中的下一次单击会执行以下代码块中所描述的操作，无论单击是否是在同一个复选框或 DOM 的任何其他部分。

Answer 1

问题在于，无论

else if

是否是

event.target

，

checkbox

条件都为真。因此，当您单击活动复选框时，您将切换所有活动复选框。

将

event.target

和

active

的检查分开。

function toggleSelectionMenu(checkbox, menu) {
  let active = false;
  document.addEventListener('click', function (event) {
    if (event.target !== checkbox) {
      return;
    }
    if (!active) {
      checkbox.checked = true;
      menu.style.display = 'block';
      active = true;
      console.log(active);
    } else {
      checkbox.checked = false;
      menu.style.display = 'none';
      active = false;
      console.log(active);
    }
  });
}