Jak wykryć zdarzenie dragleave w Firefoksie podczas przeciągania poza okno

Question

Apr 20, 2012, 11:17 PM

Jak wykryć zdarzenie dragleave w Firefoksie podczas przeciągania poza okno

Firefox nie uruchamia poprawnie zdarzenia dragleave podczas przeciągania poza okno:

https://bugzilla.mozilla.org/show_bug.cgi?id=665704

https://bugzilla.mozilla.org/show_bug.cgi?id=656164

Próbuję opracować obejście tego problemu (co, jak wiem, jest możliwe, ponieważ Gmail to robi), ale jedyne, co mogę wymyślić, wydaje się naprawdę hackish.

Jeden ze sposobów na dowiedzenie się, że przeciągnięcie poza okno wystąpiło, to oczekiwanie nadragover zdarzenie, aby przestać strzelać (ponieważdragover strzela stale podczas operacji przeciągania i upuszczania). Oto jak to robię:

<code>var timeout;

function dragleaveFunctionality() {
  // do stuff
}

function firefoxTimeoutHack() {
  clearTimeout(timeout);
  timeout = setTimeout(dragleaveFunctionality, 200);
}

$(document).on('dragover', firefoxTimeoutHack);
</code>

Ten kod zasadniczo tworzy i czyści limit czasu w kółko. Limit czasu 200 milisekund nie zostanie osiągnięty, chyba żedragover zdarzenie przestaje strzelać.

Chociaż to działa, nie podoba mi się pomysł wykorzystania limitu czasu w tym celu. Źle się czuje. Oznacza to również niewielkie opóźnienie, zanim zniknie styl „dropzone”.

Innym pomysłem było wykrycie, kiedy mysz opuszcza okno, ale normalne sposoby działania nie wydają się działać podczas operacji przeciągania i upuszczania.

Czy ktoś ma lepszy sposób na zrobienie tego?

AKTUALIZACJA:

Oto kod, którego używam:

<code><!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Drag and Drop Issue</title>
  <script src="http://code.jquery.com/jquery.js"></script>
</head>
<body>
  Open up the console and look at what number is reporting when dragging files in and out of the window. The number should always be 0 when leaving the window, but in Firefox it's not.
  <script type="text/javascript">
    $(function() {
      var counter = 0;
      $(document).on('dragenter', function(e) {
        counter += 1;
        console.log(counter, e.target);
      });
      $(document).on('dragleave', function(e) {
        counter -= 1;
        console.log(counter, e.target);
      });
    });
  </script>  
</body>
</html>
</code>