title: Can't preventDefault() on drop event on a div with Svelte
body: <p>I'm trying to implement a file dropper on a <code>&lt;div&gt;</code> as a Svelte component. I've tried every combination of <code>preventDefault</code> but the browser still loads the dropped file instead of passing it to the component.</p>
  
  <pre><code>&lt;script&gt;
      function handleDrop(event) {
          event.preventDefault();
          console.log("onDrop");
      }
  
      function handleDragover(event) {
          console.log("dragOver");
      }
  &lt;/script&gt;
  
  &lt;style&gt;
      .dropzone {
          display: block;
          width: 100vw;
          height: 300px;
          background-color: #555;
      }
  &lt;/style&gt;
  
  &lt;div class="dropzone" on:drop|preventDefault={handleDrop} 
      on:dragover|once|preventDefault={handleDragover}&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I've tried with and without <code>event.preventDefault();</code> in handler functions. Also tried with <code>on:dragenter</code> event and different combinations of modifiers, i.e. with <code>stopPropagation</code>. The browser still opens the dropped file. What am I doing wrong? Thanks!  </p>
  
  <p><strong>(UPDATE) FIX:</strong>
  Okay, the culprit was the <code>|once</code> modifier. Once removed from the <code>on:dragover</code> in <code>&lt;div&gt;</code> everything works great, except that <code>dragover</code> event fires continuously while dragging across the div. <code>event.preventDefault();</code> inside handler functions is not needed as the <code>|preventDefault</code> modifier works correctly. Here is the code (omitting <code>&lt;style&gt;</code> for brevity):</p>
  
  <pre><code>&lt;script&gt;
      function handleDrop(event) {
          console.log("onDrop");
      }
      function handleDragover(event) {
          console.log("onDragOver");
      }
  &lt;/script&gt;
  
  &lt;div class="dropzone" on:drop|preventDefault={handleDrop} 
      on:dragover|preventDefault={handleDragover}&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Not submitting this as an answer yet, because I would like to find out why I can't use <code>|once</code> modifier for <code>dragover</code> event, which would be useful for my app. Thanks!</p>