JavaScript Module 模式和拖放 API

JavaScript Module pattern and Drag and Drop API

本文关键字：拖放 API 模式 Module JavaScript      更新时间：2023-09-26

我有一个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

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

使用 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

另请参阅此问题/答案。

相关文章：