`drop` 事件后如何停止重定向？答案

【问题标题】：How to stop redirecting after `drop` event?`drop` 事件后如何停止重定向？
【发布时间】：2012-01-20 07:58:23
【问题描述】：

在 Firefox 中将文件放入 div 后，网页将被重定向到该文件。我试图在drop 处理程序中使用jQuery 的e.preventDefault() 来阻止这种传播，但失败了。

参见this demo，将文件放入#test 不会重定向网页，但放入#test1 会，我想知道为什么。我是否应该始终将处理程序绑定到 dragenter、dragover、dragleave 和 drop 以防止在 drop 之后传播？

更新：

我在html5doctor上找到了一些提示：

要告诉浏览器我们可以放入这个元素，我们所要做的就是取消拖动事件。然而，由于 IE 的行为不同，我们需要对 dragenter 事件做同样的事情。

还有 Mozilla claims:

dragenter 和 dragover 事件的侦听器用于指示有效的放置目标，即拖动项目可能的位置被丢弃。

但我在 Firefox 上测试了this demo，#test 有效，#test1 无效，似乎 Mozilla 犯了一个错误，而 html5doctor 是正确的：Firefox 需要 dragover 只是为了使 drop 有效。

【问题讨论】：

标签： jquery html drag-and-drop

【解决方案1】：

需要在 Google Chrome 和 Safari 中取消 ondragover 事件以允许触发 ondrop 事件。

【讨论】：

啊，找到了。 'dragenter 和 dragover 事件的侦听器用于指示有效的放置目标'developer.mozilla.org/En/DragDrop/…。但是我的演示没有dragenter：jsfiddle.net/mKtn2/6
谢谢！这让我在 Chrome 中发疯了

【解决方案2】：

我注意到仅取消 onDragOver 还不够，我还必须取消 onDragDrop 和 onDragLeave。下面，我将显示日志记录，指示用户正在执行的行为：

<script type="text/javascript">

    var handledragleave = function handleDragLeave(e) {
            console.log("Floating away.  Do code here when float away happens.");
            return this.cancelDefaultBehavior(e);
    }

    var handledragdrop = function handleDrop(e) {
            console.log("Dropping.  Do code here when drop happens.");
            return this.cancelDefaultBehavior(e);
    }

    var handledragover = function handleDragOver(e) {
            console.log("Floating over.  Do code here when float over happens.");
            return this.cancelDefaultBehavior(e);
    }

    cancelDefaultBehavior(e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
    }

$('.your-element-being-dragged-to')
    .on('DragLeave', handledragleave)
    .on('DragDrop', handledragdrop)
    .on('DragOver', handledragover);

</script>

然后你的元素...

<p class="your-element-being-dragged-to">Drag something here!</p>

【讨论】：