无法使用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修饰符。一旦从中删除on:dragover，<div>一切都会很好用，除了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的一次指令，它只是一次关闭，使您的处理程序运行一次。但是，拖动将被触发多次，然后再将其丢弃，因此不会阻止紧随其前的拖动。

解：

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

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