javascript - 无法使用 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 的 once指令，它只是一个运行你的处理程序一次的闭包。然而，dragover 会在被丢弃之前多次发射，因此不会阻止紧接在前的 dragover。

解决方案:

只包含没有处理程序的指令:

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