JS classList.remove() 在拖动事件期间工作不规律

Question

我正在尝试构建一个拖放系统，该系统在将拖放项拖到它们上方时会突出显示可用的拖放区。 当合适的拖动项悬停在它上面时，我通过向 dropzone 添加一个类来做到这一点。 但是，当拖动项目离开（“dragleave”事件）时，有时该类不会被删除并且突出显示。 这种行为的可能原因是什么？我该如何解决？

错误示例：

代码摘录：

// drag events
  element.addEventListener("dragenter", (event) => {
    event.stopPropagation();
    event.preventDefault();
    checkBacktrack(event.target);
  });

  element.addEventListener("dragleave", (event) => {
    event.stopPropagation();
    event.preventDefault();
    if (event.target === nodeStack.at(-1)) {
      popNodeStack();
    }
  });


// Node stack functions (nodeStack = stack of nodes to keep track):

  const checkBacktrack = (element) => {
    for (let i = nodeStack.length - 1; i >= 0; i--) {
      const topNode = nodeStack.at(-1);
      if (topNode === element) {
        return true;
      } else if (topNode.contains(element)) {
        pushNodeStack(element);
        return true;
      } else {
        popNodeStack();
      }
    }
    pushNodeStack(element);
    return false;
  };

  const popNodeStack = () => {
    const removedNode = nodeStack.pop();
    tryPopHighlight(removedNode);
  };

  const pushNodeStack = (element) => {
    nodeStack.push(element);
    tryPushHighlight(element);
  };

//Highlight functions (highlightStack = stack of elements to highlight):

  const tryPushHighlight = (element) => {
    if (_isValidDropzone(element)) {
      pushHighlight(element);
    }
  };

  const tryPopHighlight = (element) => {
    if (highlightStack.at(-1) === element) {
      popHighlight();
    }
  };

  const pushHighlight = (element) => {
    element.classList.add("drag-under-item");
    const currentHighlight = highlightStack.at(-1);
    if (currentHighlight) {
      currentHighlight.classList.remove("drag-under-item");
    }
    highlightStack.push(element);
  };

  const popHighlight = () => {
    setTimeout(() => {
      const removedHighlight = highlightStack.pop();
      if (removedHighlight)
        removedHighlight.classList.remove("drag-under-item");

      const newHighlight = highlightStack.at(-1);
      if (newHighlight) newHighlight.classList.add("drag-under-item");
    });
  };

Answer 1

在发布此消息后 1 分钟，我发现了问题。 我将 nodeStack 和 highlightStack 从函数体中移到静态上下文中，现在一切都像魔术一样工作......