Question

您好我正在尝试构建一个使用HTML内置拖放功能的网络应用。我遇到的一个问题是，当我将一个项目放入另一个项目时，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是否具有属性＆＃34; data-sqlId＆＃34;看看它是否是div我希望其他人能够被投入。一旦通过，我保存每个被删除的div和目标div的两个属性。这些将保存到全局数组中。我知道drop被调用了四次而不是一次，因为这些值被添加到全局数组四次而不是一次。如果情况变得更糟，我可以只有一个检查器，当我遍历全局数组时只执行每四个项目，但我真的更喜欢只是弄清楚为什么它被调用四次。谢谢！

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

Answer 1

一旦调用了preventDefault，它将保持有效在整个活动的其余部分传播。

这就是preventDefault不会阻止通过DOM冒泡的事件。

我建议您尝试ev.stopPropagation()而不是{或1}} ev.preventDefault()。不幸的是，当我访问时，小提琴没有用，所以我无法测试答案。

<小时/> 更新：上面更正了 stopPropagation 拼写。

在stopPropagation之后发出preventDefault次呼叫后，drop的呼叫次数减少到离线测试中每次操作预期的单次呼叫。多次调用的原因是您添加了类别2和3元素作为类别1元素的子元素，并且drop事件确实冒出了DOM。

（作为观察也注意到HTML5 id值不能包含空格，因此＆＃34;容器x＆＃34;模式在语法上无效为元素ID。

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

1 个答案: