HTML5 拖放抛出 undefined is not a function 错误答案

【问题标题】：HTML5 drag& drop is throwing undefined is not a function errorHTML5 拖放抛出 undefined is not a function 错误
【发布时间】：2015-05-01 16:54:53
【问题描述】：

我是 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 函数中。
调试你的代码我在我的手机上，但我相信你的dragDrop代码有一些错误的逻辑

标签： javascript html

【解决方案1】：

您的闭包没有正确形成。就目前而言，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。

【讨论】：

完全正确。我正在实施揭示模块模式并且这个解决方案有效。感谢您的链接