javascript - HTML 为什么 drop 函数被调用四次而不是一次？

Question

您好，我正在尝试构建一个使用 HTML 拖放内置功能的 Web 应用程序。我遇到的一个问题是，当我将一个项目放入另一个项目时， on drop 函数被调用四次而不是一次。有人可以指出我做错了什么或告诉我如何修复它只被调用一次吗？谢谢!

HTML，所有 div 都与此完全相同，但具有不同的 Id

<div id="Main" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" data-sqlId="0"> 

Javascript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    if(ev.target.getAttribute("data-sqlId")!=null){
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
        moves.push({dropped:{id:data, sqlId:document.getElementById(data).getAttribute("data-sqlId")}, target:{id:ev.target.id, sqlId:ev.target.getAttribute("data-sqlId")}});
    }
    console.log(moves);
}

对与拖放功能无关的其他代码的一些解释。当被删除时，我首先检查该 div 是否具有属性“data-sqlId”，以查看它是否是我希望其他人能够被删除的 div。一旦通过，我会保存每个被删除的 div 和目标 div 的两个属性。这些被保存到全局数组中。我知道 drop 被调用了四次而不是一次，因为这些值被添加到全局数组中四次而不是一次。如果情况变得更糟，我可以有一个检查器，当我循环遍历全局数组时，只执行每四个项目，但我真的更喜欢只弄清楚为什么它被调用四次。谢谢!!

JSFiddle 与代码 https://jsfiddle.net/AwesomeTN/sk1d8jsm/

Answer 1

Once preventDefault has been called it will remain in effect throughout the remainder of the event's propagation.

也就是说，preventDefault 不会阻止事件通过 DOM 冒泡。

我建议尝试 ev.stopPropagation() 而不是(或同时)ev.preventDefault()。不幸的是，当我访问时 fiddle 不起作用，所以我无法测试答案。

<小时/>更新: stopPropagation 已更正上面的拼写。

在调用 preventDefault 之后发出 stopPropagation 调用后，对 drop 的调用次数减少到关闭状态下每个操作预期的单个调用线路测试。多次调用的原因是您添加了类别 2 和 3 元素作为类别 1 元素的子元素，并且放置事件确实在 DOM 中冒泡。

(作为观察，还请注意 HTML5 id 值不得包含空格，因此“Container x”模式在语法上作为元素 id 无效)。