Question

我是HTML5＆amp;试图学习拖拽drop feature。我有一个用于创建div元素的JavaScript函数。将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页面中编写的精细函数？

Answer 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。

HTML5拖放＆amp; drop is throwing undefined不是函数错误

1 个答案: