14

我正在学习拖放。我在JSFiddle中复制了一个 W3Schools 示例。

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

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()呢？我真的需要吗？如果是，为什么？

4

3 回答 3

22

这是一种确保您完全控制正在发生的事情的方法，因此将其留在其中没有害处，因为您永远无法确定拖放 api 规范的特定于浏览器的实现不会对您不利，例如在这里看到的（强调我的）

您必须取消 ondragenter 和 ondragover 的默认操作才能触发 ondrop。在 div 的情况下，默认操作不是 drop。这可以与 input type=text 元素的情况形成对比，其中默认操作是 drop。为了允许对 div 进行拖放操作，您必须取消默认操作

注意：链接的示例实际上并不使用e.preventDefault; 它使用的是旧的 IE 特定方法，window.event.returnValue=false但这与e.preventDefault

所以我倾向于说，虽然在许多情况下它不会产生影响，但无论如何你都应该包含它，只是为了覆盖它的某些用户的情况。

于 2013-10-02T09:36:51.747 回答
4

这可能为时已晚，但我为您的回答找到了一个很好的解释。
是的，这是必要的，因为如果您拖动链接，浏览器将尝试执行该链接而不进行拖放。

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

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

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

于 2017-04-28T18:20:34.413 回答
1

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

于 2013-10-02T08:57:21.723 回答