在drop事件中调用preventDefault()方法真的有必要吗？

Question

我正在学习拖放。我已经复制了W3Schools在JSFiddle上的示例。

该示例在放置事件中调用preventDefault()：

function drop(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

然而，我不明白在阅读文档时需要它的原因。当我删除此调用时，示例仍然可以正常工作：

function drop(ev) {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

那么，调用 preventDefault() 有什么作用？我真的需要它吗？如果需要，为什么呢？

- Jérôme Verstrynge

Answer 1

这是一种确保您完全控制正在发生的事情的方法，因此将其留在其中没有害处，因为您永远无法确定拖放 API 规范的特定于浏览器的实现是否会对您产生负面影响，例如在此处看到的（这里）（重点是我的）。

为了使 ondrop 触发，必须取消 ondragenter 和 ondragover 的默认操作。对于 div ，默认操作不是放置。这可以与输入类型为 text 的元素进行对比，在该元素的情况下，默认操作是放置。为了允许在 div 上执行拖放操作，必须取消默认操作

注意：链接的示例实际上并未使用 e.preventDefault；它使用了一个旧的针对 IE 的方法，即 window.event.returnValue=false，但这与 e.preventDefault 具有相同的效果。

因此，我倾向于说，虽然在许多情况下它不会有区别，但您应该仍然包含它，以涵盖某些用户的情况，即它确实有帮助。

- Stephen Byrne

---

这并没有解释在drop处理程序中需要使用preventDefault的原因。引用的文本也没有提到它。 - Glenn Jorde

@Glenn Jorde - 引用的文本引用了一个具体的例子，在这个例子中，您必须取消默认事件操作才能使拖放工作。诚然，它没有使用 e.preventDefault，而是使用旧版IE特定的样式 window.event.returnValue=false，但由于它们是等效的，我认为没有必要提到它。重点是，即使您遇到需要取消操作才能使拖放工作的浏览器版本，也不会有任何损害留下它。（希望现在这些浏览器版本已经很少见了） - Stephen Byrne

如果我理解正确的话，链接的文档表明你必须从"ondragover"或"ondragenter"中调用preventDefault来启用拖放...并没有多少关于在ondrop中调用它的影响。 - codecitrus

@Cod3Citrus - 这是真的 - 这只是一个例子，确保在接下来发生任何“默认”操作时取消它，以防它导致你希望发生的下一个操作无法正常工作...这可能不太适用于现在浏览器行为已经更加标准化的情况 :) - Stephen Byrne

Answer 2

这可能有点晚，但我找到了一个很好的解释来回答您的问题。
是必需的，因为在拖动链接时，浏览器会尝试执行该链接而不是进行拖放操作。

引用: “对于像链接这样的拖动物，我们需要阻止浏览器的默认行为，即导航到该链接。要做到这一点，在dragover事件中调用e.preventDefault()。另一个好的做法是在同一处理程序中返回false。浏览器在需要这些方面有点不一致，但添加它们没有什么坏处。”

资源: https://www.html5rocks.com/en/tutorials/dnd/basics/

希望这可以帮助像我这样的人提出问题。

- GaryP

Answer 3

也许尝试在每个不同的浏览器中查看是否需要它。我猜在这个简单的示例中，你不知道它，但如果它是表单的一部分，我可以看到需要防止点击冒泡。

- Scary Wombat