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

添加＆＃39; dragover＆＃39;具有preventDefault的事件，它应该工作。

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

JavaScript模块模式和拖放API

1 个答案: