在drop事件上是否真的需要调用preventDefault()？

Question

我正在学习拖拽.我在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()什么？我真的需要它吗？如果是,为什么？

Answer 1

这是确保你完全控制正在发生的事情的一种方式,所以留下它是没有害处的,因为你永远无法确定拖放api规范的浏览器特定实现不会对你起作用,例如在这里看到(强调我的)

您必须取消ondragenter和ondragover的默认操作才能启动ondrop.对于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/

希望这对像我这样质疑一切的人有所帮助。