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

你好，我想建立一个使用HTML的阻力和内置功能下降一个Web应用程序。我遇到的一个问题是，当我将一个项目拖放到另一个项目时，拖放功能被调用四次而不是一次。有人可以指出我做错了什么，或告诉我如何解决它只能被称为一次？谢谢！HTML为什么函数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/

来源

2015-10-14 AwesomeTN

你能演示该问题[堆栈段（http://meta.stackoverflow.com/questions/270944/feedback-requested-stack-snippets-2-0）或的jsfiddle？ – Barmar

即时通讯工具有拖动拖放甚至在JSFiddle工作 – AwesomeTN

我添加了一个JSFiddle与我的代码，但我无法得到它甚至拖放所有 – AwesomeTN

一旦的preventDefault已经把它称为仍然有效整个事件的传播的其余部分。

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

我会建议尝试ev.stopPropagation()，而不是（或者以及）ev.preventDefault()。不幸的是，当我访问时，小提琴没有工作，所以我无法测试答案。

更新： stopPropagation拼写以上校正。

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

（作为观察还指出，HTML5 ID值不能包含空格所以“容器x”的模式是作为元素ID语法无效）。

来源

2015-10-14 23:21:13 traktor53

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

回答

相关问题