dragexit vs dragleave-应该使用哪个？

本文介绍了dragexit vs dragleave-应该使用哪个？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 HTML拖放API定义了两个非常相似的事件： dragleave 和 dragexit ，它们与 dragenter 旨在帮助跟踪当前的放置目标。The HTML Drag and Drop API defines two very similar events, dragleave and dragexit, which along with dragenter are intended to help track the current drop target.快速搜索并没有找到任何当前且清晰的文档在这两个事件中，一个应该在另一个事件上使用，以及浏览器支持，所以我想在这里询问。A quick search didn't turn up any current and clear documentation of the two events, when one should be used over another, and the browser support, so I thought I'd ask here.我将分享我发现的资源到目前为止：I'll share the resources I found so far: HTML规范详细说明了应该触发每个事件的时间，但是需要解密。 MDN文档（ HTML拖放API 和各个 dragexit / dragleave 页）并没有多大帮助，说 dragexit事件被触发当元素不再是拖动操作的立即选择目标时。 /当拖动的元素或文本选择离开有效的放置目标时，将触发dragleave事件。 并且不提供有关对dragexit的浏览器支持的信息（自2017年3月起） Dottoro的dragexit文档（谷歌点击率最高的另一个）似乎已经过时，声称从Firefox版本3.5开始，dragexit事件已过时。请改为使用ondragleave事件。 Mozilla的bug 619703 和 W3C错误11568 引用了这两个事件的历史： 像Gecko / Firefox最初实现的 dragexit 而IE至少实现了 dragleave ，主要区别在于事件的顺序： dragexit 在相应的拖动之前触发输入，而令人困惑的是， dragleave 之后会触发。 HTML5规范最初仅定义为 dragleave 具有IE语义，但后来（〜2013年）添加了具有Mozilla语义的 dragexit 。 Gecko在Firefox 3.5（2009）中似乎实现了 dragleave ，最初是 dragexit 的同义词，但后来（4.0， 〜2011？）进行更改以符合规范。 caniuse 表示现代浏览器或多或少支持HTML DnD API，但没有具体说明 dragexit The HTML specification has detailed description of when each event is supposed to be fired, but it requires some deciphering.The MDN docs (HTML Drag and Drop API and individual dragexit/dragleave pages) are not much of a help, saying "The dragexit event is fired when an element is no longer the drag operation's immediate selection target." / "The dragleave event is fired when a dragged element or text selection leaves a valid drop target." and providing no information about browser support for dragexit (as of 2017-03)Dottoro's dragexit docs (another of the top Google hits) seems out of date, claiming that "The dragexit event is obsolete in Firefox from version 3.5. Use the ondragleave event instead."Mozilla's bug 619703 and W3C bug 11568 referenced there shed some light on the history of these two events:Looks like Gecko/Firefox initially implemented dragexit while IE at least implemented dragleave, the major difference being the order of events: dragexit fires before corresponding dragenter, while dragleave, confusingly, fires after.The HTML5 spec initially only defined dragleave with IE semantics, but later (~2013) added dragexit with Mozilla's semantics.Gecko appears to have implemented dragleave in Firefox 3.5 (2009), originally synonymous with dragexit, but later (4.0, ~2011?) changing it to match the spec.caniuse indicates that the HTML DnD API is more-or-less supported across modern browsers, but does not say anything about dragexit specifically推荐答案我从MDN中获取了代码示例，并在Chrome 57.0.2987.110和Firefox 52.0.2。I have taken code sample from MDN and ran it on Chrome 57.0.2987.110 and Firefox 52.0.2. dragexit dragleave drop 但是Chrome从未触发 dragexit 事件。But Chrome never fired dragexit event. dragleave drop 进一步分析 dragexit 事件，我在Wikipedia中发现它是Mozilla的一部分 XUL事件表示：Further analysis on dragexit event, I found out in Wikipedia that it's part of Mozilla XUL events which says:如果您需要代码段，这里是 dragexit 和 plunkr 中的code> dragleave 事件摘要。 / p> In case you need code snippets, here it is dragexit and dragleave event snippet 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);有一个有趣的教程显示了DnD API可以完全实现而无需使用所有浏览器都不完全支持的 dragexit 事件。您的安全选择是使用 dragleave 事件，而不是所有主流浏览器都很好地支持该事件。There is an interesting tutorial that shows that DnD API can be fully implemented without using the dragexit event which is not fully supported by all browsers. Your safe bet is to use the dragleave event instead that is well supported by all major browsers. 这篇关于dragexit vs dragleave-应该使用哪个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！