搞懂html5新增的拖放API（分析火狐和其它浏览器的不同）

最新推荐文章于 2025-06-15 18:02:13 发布

原创最新推荐文章于 2025-06-15 18:02:13 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #火狐 #拖放API #ondrop #ondragover

HTML5 专栏收录该内容

0 篇文章

订阅专栏

本文探讨了HTML5中拖放API的使用，特别是在火狐和其他浏览器之间的差异。首先，文章指出ondrop事件默认不会触发，需要通过设置ondragover事件返回false来启用。然后，介绍了在火狐中实现拖放效果的特殊要求，即需要为拖动元素设置dataTransfer.setData。最后，针对火狐中数据拖放导致新页面打开的问题，提出了阻止新页面打开的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.为什么ondrop事件不被调用

当我们直接写document.ondrop=function(e){alert("test")};这个test是不会被弹出的，因为html元素默认是阻止放的操作的，自然这个事件也不会被激发，所以想让这个事件被调用，必须加上这个，document.ondragover=function(e){ return false; } ondrop这个事件才会被调用

2. 火狐与其它浏览器的不同

如果你只是想看到拖放的效果，在其它浏览器你只需要在html元素上加上draggable=true即可，但是火狐有这句话，你也看不到效果，因为火狐要求被拖动元素必须包含数据，所以你需要给他加上数据，方法 xx.ondragstart=function(e){ e.dataTransfer.setData("text","www.baidu.com"); } 当然这个setdata方法你可以随便写。

但是这里有一点非常头疼，就是火狐会默认把你的携带数据在一个新的页面打开，上面这个例子就会打开百度在新页面。如何阻止他打开新页面呢。

方法： document.ondragover=function(e){ return false; }

document.ondrop=function(e){ return false; } 以上代码无效，还是会打开新的页面

方法： document.ondragover=function(e){ return false; }

document.ondrop=function(e){

     e.stopPropagation();

} 以上代码也无效，不同在于火狐在当前页面打开了百度。

方法：

document.ondragover = function (e) {
    e.stopPropagation();

}

document.ondrop = function (e) {
    e.stopPropagation();

}
以上代码才是真正有效的，阻止百度的打开。