javascript - addEventListener 下降不触发

Question

我正在尝试将放置事件附加到 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 事件仍然没有触发。有什么想法吗？

Answer 1

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

添加这段代码，它将起作用。

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