JavaScript 模块模式和拖放 API

Question

我在 js 中有一个示例模块，该模块用于管理拖放文件上传。 该代码似乎适用于“dragenter”事件函数，但是当我删除文件时，“drop”事件应该调用被删除的函数，代码总是转发到文件路径。

这里是代码示例

var testModule = (function testBuilder(){
    function call(evt) {
        evt.preventDefault();
        console.log('works');
    }

    function dropped(evt) {
      evt.preventDefault();
      console.log('file dropped');
    }

    var element = document.getElementById('testBlock');

    function init() {
      element.addEventListener('dragenter', call, false); 
      element.addEventListener('drop', dropped, false);
    }

    publicAPI = {
        init: init
    };

    return publicAPI;
})();

window.onload = function() {
    testModule.init();
};

这里有一个 jsbin https://jsbin.com/redixucate/edit?js,console,output

如果有人能弄清楚为什么它不断重定向文件路径，我将不胜感激。

Answer 1

使用 preventDefault 添加 'dragover' 事件，它应该可以工作。

在你的 init() 中：

element.addEventListener('dragover', over, false);

及以上功能：

function over(e) { 
   e = e || window.event; 
   if(e.preventDefault) {
     e.preventDefault();
   } 
}

还为您的其他两个功能添加相同的预防措施..

见https://jsbin.com/xemovariwu/1/edit?js,console,output

另见this问题/答案。