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問題/答案。