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中删除后，一切工作正常，除了event.preventDefault();事件在拖动整个div时连续触发。不需要|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事件使用class GFG{ static void printFun(int test) { if (test < 1) return; else { System.out.printf("%d ",test); printFun(test-1); // statement 2 System.out.printf("%d ",test); return; } } public static void main(String[] args) { int test = 3; printFun(test); } }修饰符的原因，这对我的应用程序很有用。谢谢！

Answer 1

问题：

这是植根于HTML拖放的常见陷阱（不是Svelte的错），必须取消最后的dragover事件才能取消drop。查看Svelte的once指令，它只是一个关闭，可一次运行您的处理程序。但是，拖动将被触发多次，然后再将其丢弃，因此不会阻止紧随其前的拖动。

解决方案：

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

<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

无法使用Svelte在div上的drop事件上阻止Default（）

2 个答案: