javascript - 从桌面将文件拖到浏览器时，在 'dragenter'上显示覆盖

我正在尝试达到与imgur.com相同的效果(将文件从桌面拖到imgur.com，您会看到一个很酷的叠加层)。感谢这篇文章，已经有了一个可行的解决方案:Event propagation, overlay and drag-and-drop events

但是:我发现解决方案不尽人意。
问题是$(document).on('dragenter')悬停在子元素上时会被多次触发。我一直在寻找一个事件，当我进入视口(viewport)时会触发一次事件，而当我离开视口(viewport)时会触发一次事件，因此我可以在dragenter和dragleave上拥有一个干净的$ overlay.fadeIn()和.fadeOut()。

我用填充整个视口(viewport)的透明元素解决了它。然后，我在该透明元素上而不是在$(document)上调用dragenter。然后使用$('*:visible')。live('dragenter')显示隐藏的和真实的叠加层。 $('＃transparentOverlay')。on('dragleave')隐藏叠加层。很hacky，但它可以工作(至少在safari / chrome / firefox中)

但是只是选择器$('*:visible')。live()让我头疼...

有人有更好的建议吗？

最佳答案

这样尝试，对我来说效果很好。本质上，它是在模仿dragenter和dragleave事件，但仅使用dragover:

;(function() {
    var isOver = false, interval;

    $(document).on('dragover', function(e) {
        e.preventDefault();

        clearInterval(interval);

        interval = setInterval(function() {
            isOver = false;
            clearInterval(interval);

            /*** callback for onDragLeave ***/
        }, 100);

        if (!isOver) {
            isOver = true;

            /*** callback for onDragEnter ***/
        }
    });
})();