快速搜索没有发现任何当前和清晰的两个事件的文档,当一个应该用于另一个,以及浏览器支持,所以我想我会在这里问.
我将分享到目前为止我找到的资源：
> HTML specification详细描述了每个事件应该被触发的时间,但它需要一些解密.
> MDN文档(HTML Drag and Drop API和单独的dragexit/dragleave页面)没有多大帮助,说“当元素不再是拖动操作的直接选择目标时,会触发dragexit事件.” /“当拖动的元素或文本选择留下有效的放置目标时,会触发dragleave事件.”并且没有提供有关dragexit的浏览器支持的信息(截至2017-03)
> Dottoro’s dragexit docs(谷歌的另一个热门歌曲)似乎已经过时了,声称“版本3.5中的dragexit事件在Firefox中已经过时了.请改用ondragleave事件.”
> Mozilla’s bug 619703和W3C bug 11568引用了这两个事件的历史：
>看起来Gecko / Firefox最初实现了dragexit,而IE至少实现了dragleave,主要区别在于事件的顺序：dragexit在相应的dragenter之前触发,而dragleave,令人困惑,之后触发.
> HTML5规范最初只使用IE语义定义了dragleave,但后来(~2013)使用Mozilla的语义添加了dragexit.
> Gecko似乎已经在Firefox 3.5(2009)中实现了dragleave,最初是dragexit的代名词,但后来(4.0,~2011？)更改它以符合规范.
> caniuse表示HTML DnD API在现代浏览器中或多或少得到支持,但没有具体说明dragexit
解决方法
Firefox event sequence is
- dragexit
- dragleave
- drop
但Chrome从未发起过dragexit事件.
Chrome event sequence is
- dragleave
- drop
关于dragexit事件的进一步分析,我在维基百科发现它是Mozilla XUL events的一部分,它说：
In addition to the common/W3C events,Mozilla defined a set of events that work only with XUL elements
如果你需要代码片段,这里是plunkr的dragexit和dragleave事件片段.
document.addEventListener("dragexit",function(event) {
console.log(event.type);
// reset the transparency
event.target.style.opacity = "";
},false);
document.addEventListener("dragleave",function(event) {
console.log(event.type);
// reset background of potential drop target when the draggable element leaves it
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
},false);
有一个有趣的tutorial显示DnD API可以完全实现,而不使用dragexit事件,并不是所有浏览器都完全支持.您可以安全地使用dragleave事件,而不是所有主流浏览器都支持.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
