拖动 API 函数不适用于 Javascript 箭头函数

Question

我已尽最大努力找到这个问题，但还是空手而归，所以我希望这不是重复的。

简而言之，我编写了一个工厂函数来帮助我在我正在处理的项目中使用一些拖放功能，但是我看到了不同的行为，具体取决于我在其中编写某些方法的方式.

代码总计如下：

  const draggables = document.querySelectorAll(draggablesSelectors);
  const containers = document.querySelectorAll(containersSelectors);

  draggables.forEach(draggableEl => {
    draggableEl.addEventListener("dragstart", dragStart, false);
    draggableEl.addEventListener("dragend", dragEnd, false);
  });

  function dragStart() {
    console.log("drag start");
  }

  function dragEnd() {
    console.log("drag end");
  }

  const returnDraggables = () => {
    return draggables;
  }

  const returnContainers = () => {
    return containers;
  }

  return {returnDraggables, returnContainers};
}

const draggableEls = Draggable(".ship", ".gameboard");

我知道使用箭头函数会改变 this 的词法范围，但我可以使用一些帮助理解的是为什么我在编写时会在控制台中看到“拖动开始”和“拖动结束” dragStart 和 dragEnd 的功能与上面的一样，但是当我将它们写成箭头函数时，它们什么都不做。

非常感谢！

更新： 感谢@kikon 帮助我意识到我在 forEach 循环之后有函数声明。一旦我按照正确的顺序（如下所示）移动了一切，一切都很好。

  const draggables = document.querySelectorAll(draggablesSelectors);
  const containers = document.querySelectorAll(containersSelectors);

  // Draggables Functions
  const dragStart = () => {
    console.log("drag start");
  }

  const dragEnd = () => {
    console.log("drag end");
  }

  const dragDrop = () => {
    console.log("drop");
  }

  // Container Functions
  const dragOver = () => {
    console.log("drag over");
  }

  const dragEnter = () => {
    console.log("drag enter");
  }

  const dragLeave = () => {
    console.log("drag leave");
  }

  const returnDraggables = () => {
    return draggables;
  }

  const returnContainers = () => {
    return containers;
  }

  draggables.forEach(draggableEl => {
    draggableEl.addEventListener("dragstart", dragStart, false);
    draggableEl.addEventListener("dragend", dragEnd, false);
    draggableEl.addEventListener("drop", dragDrop, false);
  });

  containers.forEach(containerEl => {
    containerEl.addEventListener("dragover", dragOver, false);
    containerEl.addEventListener("dragenter", dragEnter, false);
    containerEl.addEventListener("dragleave", dragLeave, false);
  });

  return {returnDraggables, returnContainers};
}

const draggableEls = Draggable(".ship", ".gameboard");
console.log(draggableEls.returnDraggables());
export default Draggable;```

Answer 1

我认为原因可能是您 declare/define 处理程序 dragStart 和 dragEnd 在 forEach 循环中使用之后。

这适用于函数，因为它们被提升了，但不适用于 vars 或 consts。不过，如果你使用 const，至于其他箭头函数，你应该有 ReferenceError.

拖动 API 函数不适用于 Javascript 箭头函数

Drag API Function Not Working With Javascript Arrow Functions

javascript

drag-and-drop

this

arrow-functions