如何在“drop"事件后停止重定向?

How to stop redirecting after `drop` event?(如何在“drop事件后停止重定向?)
本文介绍了如何在“drop"事件后停止重定向?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

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

After dropping a file into a div in Firefox, the webpage will be redirected to this file. I tried to stop this propagation using jQuery's e.preventDefault() in drop handler, and failed.

请参阅此演示,将文件放入 #test 不会't 重定向网页,但放入 #test1 会,我想知道为什么.我是否应该始终将处理程序绑定到 dragenterdragoverdragleavedrop 以防止在 drop<之后传播/代码>?

See this demo, dropping a file into #test won't redirect the webpage, but dropping into #test1 will, I want to know why. Should I always bind handlers to dragenter, dragover, dragleave and drop to prevent propagation after drop?

更新:

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

I found some tips on html5doctor:

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

To tell the browser we can drop in this element, all we have to do is cancel the dragover event. However, since IE behaves differently, we need to do the same thing for the dragenter event.

和 Mozilla 声明:

And Mozilla claims:

dragenterdragover 事件的监听器用于指示有效的放置目标,即拖动项目可能的位置被丢弃.

A listener for the dragenter and dragover events are used to indicate valid drop targets, that is, places where dragged items may be dropped.

但我在 firefox 上测试了 这个演示,#test 有效并且#test1 没有,看来 Mozilla 犯了一个错误,而 html5doctor 是对的:Firefox 只需要 dragover 才能使 drop 工作.

But I test this demo on firefox, #test works and #test1 doesn't, seems Mozilla made a mistake, and html5doctor is right: Firefox needs dragover only to make drop work.

推荐答案

ondragover 事件需要在 Google ChromeSafari 中取消允许触发 ondrop 事件.

The ondragover event needs to be canceled in Google Chrome and Safari to allow firing the ondrop event.

这篇关于如何在“drop"事件后停止重定向?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

Drag amp; Drop with Protractor by Repeater(拖动amp;通过中继器使用量角器掉落)
Getting the position of the element in a list when it#39;s drag/dropped (ui.sortable)(拖放时获取元素在列表中的位置(ui.sortable))
Detecting HTML5 Drag And Drop support in javascript(在 javascript 中检测 HTML5 拖放支持)
HTML5 drop event doesn#39;t work unless dragover is handled(除非处理了拖动,否则 HTML5 放置事件不起作用)
How to use jQuery#39;s drop event to upload files dragged from the desktop?(如何使用 jQuery 的 drop 事件上传从桌面拖动的文件?)
HTML5: dragover(), drop(): how get current x,y coordinates?(HTML5: dragover(), drop(): 如何获取当前 x,y 坐标?)