相关疑难解决方法(0)

概观

我有以下HTML结构,并且我已将dragenter和dragleave事件附加到<div id="dropzone">元素.

<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>

问题

当我将文件拖过时<div id="dropzone">,dragenter事件将按预期触发.但是,当我将鼠标移到子元素上时,例如<div id="drag-n-drop">,dragenter为<div id="drag-n-drop">元素dragleave触发事件,然后为该<div id="dropzone">元素触发事件.

如果我<div id="dropzone">再次将鼠标悬停在该元素上,dragenter则会再次触发该事件,这很酷,但随后dragleave会为刚刚离开的子元素触发事件,因此removeClass执行该指令,这并不酷.

出于以下原因,此行为存在问题:

1. 我只安装dragenter及dragleave到<div id="dropzone">,所以我不明白为什么孩子要素附上以及这些事件.

2. 我仍然<div id="dropzone">在徘徊在它的孩子上时拖着元素,所以我不想dragleave开火!

的jsfiddle

这里有一个jsFiddle修补:http …

我希望能够检测到鼠标何时离开窗口,以便在用户的鼠标位于其他位置时可以阻止事件触发.

有关如何做到这一点的任何想法？

我试图跟踪整个屏幕的dragenter/leave,这在Chrome/Safari中运行良好,由/sf/answers/721757081/提供的draghover插件提供,如下所示:

$.fn.draghover = function(options) {
    return this.each(function() {

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

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

        self.on('dragleave drop', function(e) {
            // timeout is needed because Firefox 3.6 fires the dragleave event on
            // the previous element before firing dragenter on the next one
            setTimeout( function() {
                collection = collection.not(e.target);
                if (collection.size() === 0) {
                    self.trigger('draghoverend');
                }
            }, 1);
        });
    });
};

function setText(text) {
    $('p.target').text(text); …