html - dragexit vs dragleave - 应该使用哪个？

Question

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

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

我将分享我目前找到的资源:

• HTML specification详细描述了每个事件应该何时触发，但需要一些破译。
• MDN 文档(HTML Drag and Drop API 和个人 dragexit/dragleave 页面)没有多大帮助，说 “当元素不再是拖动操作的直接选择目标时，将触发 dragexit 事件”/“当拖动的元素或文本选择离开有效的放置目标时，将触发 dragleave 事件。” 并且未提供有关浏览器对 dragexit 支持的信息(截至 2017 年 3 月)
• 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 event sequence is

1. dragexit
2. dragleave
3. drop

但是 Chrome 从未触发过 dragexit 事件。

Chrome event sequence is

1. dragleave
2. 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 事件。