title: How to detect the dragleave event in Firefox when dragging outside the window
body: <p>Firefox doesn't properly trigger the dragleave event when dragging outside of the window:</p>
  
  <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=665704" rel="nofollow noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=665704</a></p>
  
  <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=656164" rel="nofollow noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=656164</a></p>
  
  <p>I'm trying to develop a workaround for this (which I know is possible because Gmail is doing it), but the only thing I can come up with seems really hackish.</p>
  
  <p>One way of knowing when dragging outside the window has occurred it to wait for the <code>dragover</code> event to stop firing (because <code>dragover</code> fires constantly during a drag and drop operation). Here's how I'm doing that:</p>
  
  <pre><code>var timeout;
  
  function dragleaveFunctionality() {
    // do stuff
  }
  
  function firefoxTimeoutHack() {
    clearTimeout(timeout);
    timeout = setTimeout(dragleaveFunctionality, 200);
  }
  
  $(document).on('dragover', firefoxTimeoutHack);
  </code></pre>
  
  <p>This code is essentially creating and clearing a timeout over and over again. The 200 millisecond timeout will not be reached unless the <code>dragover</code> event stops firing.</p>
  
  <p>While this works, I don't like the idea of using a timeout for this purpose. It feels wrong. It also means there's a slight lag before the "dropzone" styling goes away.</p>
  
  <p>The other idea I had was to detect when the mouse leaves the window, but the normal ways of doing that don't seem to work during drag and drop operations.</p>
  
  <p>Does anyone out there have a better way of doing this?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Here's the code I am using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(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);
            });
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p&gt;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.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>