JavaScript事件监听器无法触发拖放操作

Question

我有一个页面要在其中添加页面级放置区。为此，我添加了一些事件侦听器，如下所示。

var dropZone = document.getElementById('dropZone');
window.addEventListener('dragenter', function (e) {
    console.log("test");
    dropZone.style.visibility = "visible";
});
dropZone.addEventListener('dragenter', function (e) {
    console.log("test2");
    if (true) {
        e.dataTransfer.dropEffect = 'copy';
        e.preventDefault();
    }
});
dropZone.addEventListener('dragover', function (e) {
    if (true) {
        e.dataTransfer.dropEffect = 'copy';
        e.preventDefault();
    }
});
dropZone.addEventListener('dragleave', function (e) {
    dropZone.style.visibility = "hidden";
});
dropZone.addEventListener('drop', function (e) {
    e.preventDefault();
    dropZone.style.visibility = "hidden";

    //Code to handle the selected files
    HandleDroppedFiles(e);
});

此代码确实将事件侦听器添加到dropzone元素。

但是当我尝试拖放文件时，什么也没发生。相反，我得到了“不允许”图标（如下图所示），就像其他任何不允许拖放的页面一样。

即使在详细设置下，也没有在控制台日志中添加任何消息。感觉浏览器在触发事件监听器之前就已经以某种方式阻止了下降。但是，老实说，我不知道哪里出了问题以及从哪里开始调试。

Answer 1

结果证明，我的代码没有错。只是铬很奇怪。我禁用了adblocker，重新启动了chrome。没事。检查谷歌驱动器，它有同样的问题。

因此，最后我重新启动了PC，以确保Chrome重新正确启动。一切突然又恢复正常了。 SMH。