Firefox 事件未触发答案

【问题标题】：Firefox events not firingFirefox 事件未触发
【发布时间】：2019-05-21 07:42:16
【问题描述】：

我有一个拖放功能的事件列表列表。

td.addEventListener('dragenter', onDragEnter);
td.addEventListener('dragleave', onDragLeave);
td.addEventListener('dragover', onDragOver);
td.addEventListener('drop', onDrop);

在 Firefox 中，当一个项目被丢弃时，drop 事件不会被触发。为dragenter、dragover 和dragleave 调用的函数各自阻止默认操作（复制自http://mereskin.github.io/dnd/）：

const onDragEnter = e => {
  onDragOver(e);
  console.log('onDragEnter:');
  if(e.target.nodeType == 1) {
    e.target.className = 'drop-over';
}  };

const onDragOver = e => {
  console.log('onDragOver:');
  if(e.target.nodeType == 1) {
    e.dataTransfer.dropEffect = e.target.getAttribute('data-drop-effect');
    e.preventDefault();
    e.stopPropagation();
}  };

在http://mereskin.github.io/dnd/ 上，所有事件似乎都有效（尝试使用相同的方法、事件监听器等）。可拖动项是用特定属性构造的：

let img = document.createElement('img');
img.src = `icons/${obj._image}`;
img.setAttribute('draggable','true');

在我的和链接的网站上，它在 Chrome 中完美运行。

编辑：也试过 Edge，效果很好。在另一台机器上也试过FF，同样的结果。为演示创建了一个 jsfiddle：https://jsfiddle.net/as965dkz/6/

【问题讨论】：

您会从您的代码中创建一个 sn-p 还是从中创建一个 jsFiddle？在你的标记旁边？
jsfiddle.net/as965dkz/6 chrome 可以，firefox 不行
@Teemu，即使我允许它仍然无法正常工作
把drop事件附加到window或者document怎么样？
不。还是一样的故事。它甚至不会阻止默认操作，因此它总是将我重定向到我放在 td 元素上的 img 的位置

标签： javascript firefox

【解决方案1】：

我发现，Firefox 要求在 dragstart 事件中设置 dataTransfer.setData()。之后，必须在 drop 事件上调用 e.preventDefault();。

【讨论】：