addEventListener drop 不触发答案

【问题标题】：addEventListener drop not firingaddEventListener drop 不触发
【发布时间】：2017-10-10 13:30:31
【问题描述】：

我正在尝试将放置事件附加到 HTML div：

document.getElementById('sub-main').addEventListener("drop", 
                                     () => {console.log('DROP')});

但它不会触发。添加用于测试目的的点击事件有效 - 此点击事件触发：

document.getElementById('sub-main').addEventListener("click", 
                                     () => {console.log('Click')});

我读过从ondragover 返回 false 会有所帮助：

document.getElementById('sub-main').addEventListener("ondragover", 
                                     () => {return false});

document.getElementById('sub-main').addEventListener("drop", 
                                     () => {console.log('Drop')});

但这也不起作用。我尝试将 draggable 设置为 true：

document.body.setAttribute('draggable', true);

但也没有运气！

使用getEventListeners() 将事件侦听器记录到控制台会显示所有事件，甚至是我选择的任何随机事件名称：

getEventListeners(document.getElementById('sub-main'));

但是 drop 事件仍然没有触发。有什么想法吗？

【问题讨论】：

你试过ondrop而不是drop吗？
是的，我试过了，但是根据这个链接：w3schools.com/jsref/event_ondrop.asp 它是 drop
w3schools.com/jsref/tryit.asp?filename=tryjsref_ondrag_all 非常适合我
@AnteJablanAdamović 这是正确答案 - 如果您将其添加为答案，我会将其标记为正确

标签： javascript events drag-and-drop

【解决方案1】：

要启用拖动，您首先应该使用 dragover 事件禁用浏览器的默认行为。

添加这段代码就可以了。

document.addEventListener("dragover", function(event) {
  event.preventDefault();
});

【讨论】：

一直在拉我的头发，直到我找到这个。谢谢。
谢谢！如果我有馅饼，我会寄给你

【解决方案2】：

我在 plunker 中进行了一些试验和错误，得出的结论是，您首先需要在文档上设置 eventListener（至少不要使用.getElementById（'sub-main'）在 plunker 中给出错误），然后在向哪个目标开火的事件监听器。要让它检测到它可以被丢弃，你需要有其他的事件监听器，比如：drag、dragstart、dragover、dragleave 和 dragenter。 Just follow what they did here on MDN.

【讨论】：