在子元素上拖动时，父元素的“dragleave”激发

Question

我有以下HTML结构，并将dragenter和dragleave事件附加到

<div id="dropzone">
    <div id="dropzone-content">
        <div id="drag-n-drop">
            <div class="text">this is some text</div>
            <div class="text">this is a container with text and images</div>
        </div>
    </div>
</div>

当我将文件拖过时

如果我悬停在上

这种行为有两个问题：

>

我只附加了dragenter

我还在拖

这里有一个jsFiddle来修补：http://jsfiddle.net/yYF3S/2/

所以当我在<代码>

我需要跨浏览器兼容，至少在支持HTML5拖放的浏览器中是这样，所以这个答案是不够的。

谷歌和Dropbox似乎已经解决了这个问题，但他们的源代码是精简/复杂的，所以我无法从他们的实现中解决这个问题。




Answer 1

这有点难看，但它的工作该死的！。。。

在dragenter处理程序中存储event.target（在闭包中的变量中，或者其他），然后在draglet处理程序中，如果event.target===存储的代码，则只触发代码。

如果您的“dragenter”在您不希望它启动时启动（即，当它在离开子元素后进入时），那么最后一次在鼠标离开父对象之前启动时，它位于父对象上，因此父对象将始终是预期“dragleave”之前的最终“dragenter”。

(function () {

    var droppable = $('#droppable'),
        lastenter;

    droppable.on("dragenter", function (event) {
        lastenter = event.target;
        droppable.addClass("drag-over");            
    });

    droppable.on("dragleave", function (event) {
        if (lastenter === event.target) {
            droppable.removeClass("drag-over");
        }
    });

}());

Answer 2

我终于找到了一个我满意的解决方案。我实际上找到了几种方法来做我想做的事情，但没有一种方法像当前的解决方案那样成功...在一个解决方案中，由于向#dropzone元素添加/删除边框，我经历了频繁的闪烁...在另一个解决方案中，如果您将鼠标悬停在浏览器之外，边框永远不会被删除。

无论如何，我最好的黑客解决方案是：

var dragging = 0;

attachEvent(window, 'dragenter', function(event) {

    dragging++;
    $(dropzone).addClass('drag-n-drop-hover');

    event.stopPropagation();
    event.preventDefault();
    return false;
});

attachEvent(window, 'dragover', function(event) {

    $(dropzone).addClass('drag-n-drop-hover');

    event.stopPropagation();
    event.preventDefault();
    return false;
});

attachEvent(window, 'dragleave', function(event) {

    dragging--;
    if (dragging === 0) {
        $(dropzone).removeClass('drag-n-drop-hover');
    }

    event.stopPropagation();
    event.preventDefault();
    return false;
});

这工作得很好，但是在Firefox中出现了问题，因为Firefox正在双重调用dragenter，所以我的计数器关闭了。但尽管如此，它不是一个非常优雅的解决方案。

然后我偶然发现了这个问题：当在窗口外拖动时，如何检测Firefox中的dragleave事件

所以我把答案应用到我的情况中：

$.fn.dndhover = function(options) {

    return this.each(function() {

        var self = $(this);
        var collection = $();

        self.on('dragenter', function(event) {
            if (collection.size() === 0) {
                self.trigger('dndHoverStart');
            }
            collection = collection.add(event.target);
        });

        self.on('dragleave', function(event) {
            /*
             * Firefox 3.6 fires the dragleave event on the previous element
             * before firing dragenter on the next one so we introduce a delay
             */
            setTimeout(function() {
                collection = collection.not(event.target);
                if (collection.size() === 0) {
                    self.trigger('dndHoverEnd');
                }
            }, 1);
        });
    });
};

$('#dropzone').dndhover().on({
    'dndHoverStart': function(event) {

        $('#dropzone').addClass('drag-n-drop-hover');

        event.stopPropagation();
        event.preventDefault();
        return false;
    },
    'dndHoverEnd': function(event) {

        $('#dropzone').removeClass('drag-n-drop-hover');

        event.stopPropagation();
        event.preventDefault();
        return false;
    }
});

这是干净和优雅的，似乎在我测试过的每一款浏览器（尚未测试IE）中都能正常工作。

Answer 3

如果不需要将事件绑定到子元素，则始终可以使用指针事件属性。

.child-elements {
  pointer-events: none;
}