在 Javascript 中使用命名空间时 dataTransfer 为空

Question

我在 Javascript 中编写了一些函数。为了防止名称冲突，我决定将它们放入命名空间。在我看来一切正常，但 drop 事件现在没有 dataTransfer 对象。原代码如下：

var dropBox;

function init(){        
    dropBox = $('#img-container');

    dropBox.bind({
        dragenter: function() {
            $(this).addClass('highlighted');
            return false;
        },
        dragover: function() {
            return false;
        },
        dragleave: function() {
            $(this).removeClass('highlighted');
            return false;
        },
        drop: function(e) {
            var dt = e.originalEvent.dataTransfer; //IT IS NOT NULL          
            displayFiles(dt.files);
            $(this).removeClass('highlighted');
            return false;
        }           
    });

    showDragDropText(true);

    if(window.FileReader == null) alert('Your browser doesn\'t support File API!');     
}

放入命名空间后：

var mynamespace = {
    dropBox: null,

    init : function(){

    dropBox = $('#img-container');  

    dropBox.bind({
        dragenter: function() {
            $(this).addClass('highlighted');
            return false;
        },
        dragover: function() {
            return false;
        },
        dragleave: function() {
            $(this).removeClass('highlighted');
            return false;
        },
        drop: function(e) {
            var dt = e.originalEvent.dataTransfer; //dataTransfer IS NULL!!! 
            console.log(e);             
            mynamespace.displayFiles(dt.files);
            $(this).removeClass('highlighted');             
            return false;
        }           
    });

    mynamespace.showDragDropText(true);
    if(window.FileReader == null) alert('Your browser doesn\'t support File API!');
}

我做错了什么？

Answer 1

我找到了解决办法。我必须像下面这样在我的命名空间中绑定 drop 事件：

    dropBox.bind("dragenter.mynamespace",function(){
        $(this).addClass('highlighted');
        return false;
    });
    dropBox.bind("dragover.mynamespace",function(){
        return false;
    });
    dropBox.bind("dragleave.mynamespace",function(){
        $(this).removeClass('highlighted');
        return false;
    });
    dropBox.bind("drop.mynamespace",function(e){
        var dt = e.originalEvent.dataTransfer;                      
        mynamespace.displayFiles(dt.files);
        $(this).removeClass('highlighted');             
        return false;
    });

现在完美了！

在 Javascript 中使用命名空间时 dataTransfer 为空

dataTransfer is null when using namespace in Javascript

html

javascript

drag-and-drop

dom-events