无法使用Svelte阻止对div上的drop事件的默认（）

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 。 浏览器仍会打开已删除的文件。 我究竟做错了什么？ 谢谢！

（更新）FIX：好的，罪魁祸首是|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>

还没有提交这个作为答案，因为我想找出为什么我不能使用|once修改器用于dragover事件，这对我的应用程序很有用。 谢谢！

Answer 1

问题：

这是一个根植于HTML拖放（而不是Svelte的错误）的常见问题，必须取消最后一个dragover事件才能取消drop 。 看看Svelte 曾经的指令，它只是一个运行你的处理程序一次的闭包。 但是，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