Javascript Can'；t prevent default（）在具有Svelte的div上发生drop事件

我试图在

上实现一个文件拖放器，作为一个轻巧的组件。我尝试了

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>

还没有将此作为答案提交，因为我想知道为什么我不能对

dragover

事件使用

| once

修饰符，这对我的应用程序很有用。谢谢

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

.dropzone{
显示：块；
宽度：100vw；
高度：300px；
背景色：#555；
}

---

handleDrop（事件）}
on:dragover={handleDragover}>

---

导出功能手柄（ev）{
ev.preventDefault（）；
控制台日志（“dragOver”）；
}
导出功能handleDrop（ev）{
ev.preventDefault（）；
控制台日志（“onDrop”）；
}

看这里：

---

问题：

这是一个常见的问题，源于HTML拖放（不是Svelte的错），必须取消最后一个

dragover

事件才能取消

drop

。看看Svelte的指令，它只是一个运行处理程序一次的闭包。但是，dragover会在掉落前多次开火，因此不会阻止前一个dragover

解决方案：

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

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

---

这对我来说仍然不起作用。此外，

export function

现在在控制台中创建警告：

是在没有预期的prop'handleDrop'

的情况下创建的，根据我应该能够在：drop={handleDrop}上添加

，并且在函数中我将接收事件对象：
function handleDrop（event）
。这适用于
dragover
事件：当拖动
div
时，如果执行
console.log（event）
，我可以在控制台中看到事件对象。
<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>

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