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(); 
}; 

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

一个jsbin如果任何人都可以找出原因，它使重定向文件路径，我会RLY感激。

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问题/答案。