dragexit vs dragleave - 哪个应该用？

Question

HTML Drag and Drop API定义了两个非常相似的事件dragleave和dragexit，它们与dragenter一起用于帮助跟踪当前的投放目标。

快速搜索没有显示这两个事件的任何当前和清晰的文档，当一个应该用于另一个时，以及浏览器支持，所以我想我会在这里问。

我将分享到目前为止我找到的资源：

• 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

Answer 1

我已从MDN获取代码示例并在Chrome 57.0.2987.110和Firefox 52.0.2上运行。

  

Firefox事件序列是

     

  
1. dragexit
  
2. dragleave
  
3. 降
  

但Chrome从未触发dragexit事件。

  

Chrome事件序列

     

  
1. dragleave
  
2. 降
  

对dragexit事件的进一步分析，我在维基百科中发现它是Mozilla XUL events的一部分，其中说：

  

除了常见/ W3C事件之外，Mozilla还定义了一组仅适用于XUL元素的事件

如果您需要代码段，此处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); 来自plunkr的事件摘要。

dragexit

有一个有趣的tutorial表明DnD API可以在不使用所有浏览器都不完全支持的dragleave事件的情况下完全实现。您可以安全地使用proxy_pass事件代替所有主流浏览器都支持的事件。