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被調用四次而不是一次？

回答

相關問題