如何在窗外拖动时检测 Firefox 中的 dragleave 事件

我找到了解决方案。问题不在于dragleave事件没有触发;相反，dragenter 事件在首次将文件拖入窗口时触发两次（有时在拖动某些元素时也会触发）。我最初的解决方案是使用计数器来跟踪最终dragleave事件发生的时间，但dragenter事件的双重触发使计数混乱。（为什么我不能听你问dragleave？好吧，因为dragleave的功能与mouseout非常相似，因为它不仅在离开元素时触发，而且在进入子元素时触发。因此，当dragleave触发时，您的鼠标很可能仍在原始元素的范围内。

我想出的解决方案是跟踪dragenter和dragleave触发了哪些元素。由于事件会传播到文档，因此侦听特定元素的dragenter和dragleave不仅会捕获该元素上的事件，还会捕获其子元素上的事件。

因此，我创建了一个 jQuery 集合$()来跟踪哪些事件在哪些元素上触发。每当触发 dragenter 时，我都会将event.target添加到集合中，每当发生 dragleave 时，我都会从集合中删除event.target。这个想法是，如果集合为空，则意味着我实际上已经离开了原始元素，因为如果我输入一个子元素，至少一个元素（子元素）仍将在jQuery集合中。最后，当触发 drop 事件时，我想将集合重置为空，以便在下一个dragenter事件发生时准备就绪。

jQuery还节省了大量额外的工作，因为它会自动执行重复检查，因此即使Firefox错误地双重调用dragenter，也不会添加两次event.target。

呼，无论如何，这是我最终使用的代码的基本版本。我已经把它放到一个简单的jQuery插件中，如果其他人有兴趣使用它。基本上，您在任何元素上调用.draghover，draghoverstart在首次拖动到元素时触发，draghoverend在拖动实际离开元素时触发。

// The plugin code
$.fn.draghover = function(options) {
  return this.each(function() {
    var collection = $(),
        self = $(this);
    self.on('dragenter', function(e) {
      if (collection.length === 0) {
        self.trigger('draghoverstart');
      }
      collection = collection.add(e.target);
    });
    self.on('dragleave drop', function(e) {
      collection = collection.not(e.target);
      if (collection.length === 0) {
        self.trigger('draghoverend');
      }
    });
  });
};
// Now that we have a plugin, we can listen for the new events 
$(window).draghover().on({
  'draghoverstart': function() {
    console.log('A file has been dragged into the window.');
  },
  'draghoverend': function() {
    console.log('A file has been dragged out of window.');
  }
});

没有 jQuery

要在没有jQuery的情况下处理这个问题，你可以做这样的事情：

// I want to handle drag leaving on the document
let count = 0
onDragEnter = (event) => {
  if (event.currentTarget === document) {
    count += 1
  }
}
onDragLeave = (event) => {
  if (event.currentTarget === document) {
     count += 0
  }
  if (count === 0) {
    // Handle drag leave.
  }
}

根据您希望完成的操作，您可以使用仅在 Firefox 中可用的:-moz-drag-over伪类来解决此问题，该伪类允许您对拖动到元素上的文件做出反应。

看看这个简单的演示 http://codepen.io/ryanseddon/pen/Ccsua

.dragover {
    background: red;
    width: 500px;
    height: 300px;
}
.dragover:-moz-drag-over {
    background: green;
}

受到@PhilipWalton代码的启发，我简化了jQuery插件代码。

$.fn.draghover = function(fnIn, fnOut) {
    return this.each(function() {
        var n = 0;
        $(this).on('dragenter', function(e) {
            (++n, n==1) && fnIn && fnIn.call(this, e);
        }).on('dragleave drop', function(e) {
            (--n, n==0) && fnOut && fnOut.call(this, e);
        });
    });
};

现在你可以使用 jquery 插件，比如 jquery 悬停方法：

// Testing code 1
$(window).draghover(function() {
    console.log('into window');
}, function() {
    console.log('out of window');
});
// Testing code 2
$('#d1').draghover(function() {
    console.log('into #d1');
}, function() {
    console.log('out of #d1');
});

唯一对我有用的解决方案，花了我几次时间，希望这对某人有所帮助！

注意 克隆时，需要使用事件和数据进行深度克隆：

.HTML：

<div class="dropbox"><p>Child element still works!</p></div>
<div class="dropbox"></div>
<div class="dropbox"></div>

jQuery

$('.dropbox').each(function(idx, el){
    $(this).data("counter" , 0);
});
$('.dropbox').clone(true,true).appendTo($('body');
$('dropbox').on({
    dragenter : function(e){
        $(this).data().counter++;
        <!-- YOUR CODE HERE -->
    },
      dragleave: function(e){
        $(this).data().counter--;
         if($(this).data().counter === 0)
              <!-- THEN RUN YOUR CODE HERE -->
    }
});

addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        // stop your drag event here
        // for now we can just use an alert
        alert("left window");
    }
});

这是从如何检测鼠标何时离开窗口？复制的。 addEvent 只是跨浏览器 addEventListener。