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

dataTransfer is null when using namespace in Javascript

本文关键字：dataTransfer null 命名空间 Javascript      更新时间：2023-09-26

我用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!');
}

我做错了什么？

我找到了解决方案。我必须在我的命名空间中绑定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;
    });

现在它工作得很完美！

相关文章：