Question

我正在学习Drag＆amp; amp;下降。我在JSFiddle中复制了一个W3Schools示例。

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

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

然而，我不理解阅读文档时的需要。当我remove this call时，示例仍然正常：

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

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

Answer 1

这是确保您完全控制正在发生的事情的一种方式，因此将其保留下来并没有什么坏处，因为您永远无法确定拖放API规范的浏览器特定实现不会对你不利，例如看到here（强调我的）

您必须取消ondragenter和ondragover的默认操作要点火。对于div，默认操作是不要放弃。这可以与输入的情况形成对比 type = text元素，默认操作将丢弃。为了允许在div上执行拖放操作，您必须取消默认值动作

注意：链接的exampled实际上并不使用e.preventDefault;它使用较旧的IE特定方法window.event.returnValue=false，但这与e.preventDefault具有相同的效果

所以我倾向于说，虽然在很多情况下它不会产生任何影响，但你应该包括它，只是为了覆盖你的一些用户的情况。

Answer 2

这可能会迟到，但我找到了一个很好的解释你的答案是的，这是必要的，因为如果您正在拖动链接，浏览器将尝试执行该链接而不执行拖放操作。

引用： “在拖动类似链接的情况下，我们需要阻止浏览器的默认行为，即导航到该链接。为此，请在dragover事件中调用e.preventDefault（）。另一个好的做法是返回false在同一个处理程序中。浏览器在需要这些内容方面有些不一致，但添加它们并没有什么坏处。“

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

希望这可以帮助像我这样的人质疑一切。

Answer 3

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

在drop事件上是否真的需要调用preventDefault（）？

3 个答案: