Question

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

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

更新

我在html5doctor找到了一些提示：

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

和Mozilla claims：

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

但我在firefox上测试this demo，#test无效，#test1没有，似乎Mozilla犯了一个错误，html5doctor是对的：Firefox只需要dragover让drop工作。

Answer 1

需要在 Google Chrome 和 Safari 中取消ondragover事件才能触发ondrop事件。

Answer 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>

如何在'drop`事件后停止重定向？

2 个答案: