dragexit vs dragleave - 哪个应该用？

Question

HTML Drag and Drop API定义了两个非常相似的事件,dragleave并且dragexit这些事件一起dragenter用于帮助跟踪当前的放置目标.

快速搜索没有发现任何当前和清晰的两个事件的文档,当一个应该使用另一个,以及浏览器支持,所以我想我会在这里问.

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

• 在HTML规范都有详细的时候应该是每个事件被解雇的描述,但它需要一些解密.
• MDN文档(HTML拖放API和单独的dragexit/dragleave页面)没有多大帮助,说"当元素不再是拖动操作的直接选择目标时,会触发dragexit事件." /"当拖动的元素或文本选择留下有效的放置目标时,会触发dragleave事件." 并且没有提供有关dragexit的浏览器支持的信息(截至2017-03)
• Dottoro的dragexit文档(谷歌的热门歌曲中的另一个)似乎已过时,声称"版本3.5中的dragexit事件在Firefox中已经过时了.请改用ondragleave事件."
• Mozilla的bug 619703和W3C bug 11568引用了这两个事件的历史:
  • 看起来像Gecko/Firefox最初实现,dragexit而IE至少实现dragleave,主要区别在于事件的顺序:dragexit在相应之前触发dragenter,同时dragleave,令人困惑,之后触发.
  • HTML5规范最初只dragleave用IE语义定义,但后来(~2013)添加dragexit了Mozilla的语义.
  • Gecko似乎已经dragleave在Firefox 3.5(2009)中实现,最初是同义词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事件的一部分,它说:

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

如果你需要的代码片段,在这儿dragexit和dragleave从事件的片段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);

有一个有趣的教程表明DnD API可以在不使用dragexit所有浏览器都不完全支持的事件的情况下完全实现.您可以安全地使用该dragleave事件,而所有主流浏览器都支持该事件.