在使用 Svelte 的 div 上的 drop 事件上无法阻止 Default()

Question

我正在尝试在 <div> 上实现一个文件释放器作为 Svelte 组件。我已经尝试了preventDefault 的所有组合，但浏览器仍会加载删除的文件，而不是将其传递给组件。

<script>
    function handleDrop(event) {
        event.preventDefault();
        console.log("onDrop");
    }

    function handleDragover(event) {
        console.log("dragOver");
    }
</script>

<style>
    .dropzone {
        display: block;
        width: 100vw;
        height: 300px;
        background-color: #555;
    }
</style>

<div class="dropzone" on:drop|preventDefault={handleDrop} 
    on:dragover|once|preventDefault={handleDragover}></div>

我尝试过在处理函数中使用和不使用event.preventDefault();。还尝试了on:dragenter 事件和不同的修饰符组合，即stopPropagation。浏览器仍会打开拖放的文件。我究竟做错了什么？谢谢！

（更新）修复： 好吧，罪魁祸首是 |once 修饰符。一旦从<div> 中的on:dragover 中删除，一切正常，除了dragover 事件在拖动div 时连续触发。 event.preventDefault(); 不需要内部处理函数，因为 |preventDefault 修饰符可以正常工作。这是代码（为简洁起见，省略<style>）：

<script>
    function handleDrop(event) {
        console.log("onDrop");
    }
    function handleDragover(event) {
        console.log("onDragOver");
    }
</script>

<div class="dropzone" on:drop|preventDefault={handleDrop} 
    on:dragover|preventDefault={handleDragover}></div>

尚未将此作为答案提交，因为我想了解为什么我不能对 dragover 事件使用 |once 修饰符，这对我的应用程序很有用。谢谢！

Answer 1

问题：

这是一个源于 HTML 拖放的常见问题（不是 Svelte 的错），必须取消最后一个 dragover 事件才能取消 drop。查看 Svelte 的 once 指令，它只是一个运行您的处理程序一次的闭包。但是，dragover 在被放下之前会触发多次，因此不会阻止前一个 dragover。

解决方案：

只包含不带处理程序的指令：

<div 
   on:dragover|preventDefault
   on:drop|preventDefault={handler} 
>

Answer 2

<style>
    .dropzone {
        display: block;
        width: 100vw;
        height: 300px;
        background-color: #555;
    }
</style>

---

<div class="dropzone" on:drop={event => handleDrop(event)}
    on:dragover={handleDragover}>
</div>

---

<script>
    export function handleDragover (ev) {
        ev.preventDefault();
        console.log("dragOver");
    }

    export function handleDrop (ev) {
        ev.preventDefault();
        console.log("onDrop");
    }
</script>

看这里：https://svelte.dev/repl/3721cbc9490a4c51b07068944a36a40d?version=3.4.2

https://v2.svelte.dev/repl?version=2.9.10&gist=8a9b145a738530b20d0c3ba138512289