dragexit vs dragleave - 应该使用哪个？

Posted 2023-05-08

【中文标题】dragexit vs dragleave - 应该使用哪个？

【英文标题】：dragexit vs dragleave - which should be used?

【发布时间】：2017-08-04 03:29:52

【问题描述】：

html 拖放 API 定义了两个非常相似的事件，dragleave 和 dragexit，它们与 dragenter 一起旨在帮助跟踪当前放置目标。

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

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

HTML specification 详细描述了每个事件的触发时间，但需要进行一些解读。 MDN 文档（HTML Drag and Drop API 和个人 dragexit/dragleave 页面）没有太大帮助，说 “当元素不再是拖动操作的直接选择目标时，会触发 dragexit 事件。” / “当拖动的元素或文本选择离开有效的放置目标时，会触发 dragleave 事件。” 并且没有提供有关浏览器对 dragexit 支持的信息（截至 2017 年 3 月） Dottoro's dragexit docs（Google 的另一个热门歌曲）似乎已经过时，声称“从 3.5 版开始，Firefox 中的 dragexit 事件已过时。请改用 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

【参考方案1】：

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

Firefox 事件序列是

dragexit 拖动离开 放下

但 Chrome 从未触发过 dragexit 事件。

Chrome 事件序列是

拖动离开 放下

对dragexit事件的进一步分析，我在***中发现它是Mozilla XUL events的一部分，上面写着：

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

如果你需要代码 sn-ps，这里是 dragexit 和 dragleave event sn-p from plunkr。

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 表明无需使用并非所有浏览器都完全支持的dragexit 事件即可完全实现DnD API。安全的选择是使用所有主流浏览器都支持的dragleave 事件。