javascript - HTML5拖放抛出未定义不是函数错误

我是HTML5的新手，尝试学习拖放功能。我有一个JavaScript函数，用于创建div元素并向其附加dragstart事件。

var taskDefination = document.createElement("div");
        taskDefination.className = "defaultButtonHolder";
        taskDefination.setAttribute("draggable","true");
        document.getElementById("toDo").getElementsByClassName('columnContent')[0].appendChild(taskDefination);
        taskDefination.addEventListener('dragstart', dragStart, false);
}

现在我创建了一个拖放区

<span class="columnWidth">
                <div class ="columnHeader">Progress</div>
                <div class ="columnContent" ondragenter ="dragDrop.dragEnter(event)"></div>
            </span>

这里的dragEnter函数属于一个外部javascript文件，该文件已被设计为闭包。我检查了网络标签，此javascript文件已完美加载。

var dragDrop = function(){
    var _dragEnter = function(){
        console.log("Dragged dropped");
        }
    return{
        dragEnter:_dragEnter
        }
    }

现在的问题是，每当我尝试将元素放在dropzone中时，它都会引发未定义而不是函数错误。但是ondropeneter事件，如果调用在同一HTML页面中编写的函数会完美执行。尽管它在同一HTML页面中编写的函数正常工作，为什么它会引发未定义而不是函数错误呢？

最佳答案

您的封包格式不正确。就目前而言，dragDrop是从函数表达式返回的函数对象，因此没有要附加的代码。在此处快速阅读函数表达式：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function

似乎您正在尝试使用闭包来实现模块模式。为此，您需要像这样重建代码：

var dragDrop = (function() {
    var _dragEnter = function(){
        console.log("Dragged dropped");
    }
    return {
        dragEnter:_dragEnter
    }
})();

(function {})周围的第一组括号将其关闭。之后的第二组括号(function {})()立即执行它。这意味着您的模块将返回到var dragDrop，然后您将能够成功调用dragDrop.dragEnter。