Blazor拖拽preventDefault不生效，拖入文件被自动下载求助

核心原因 #

浏览器在文件拖拽过程中，dragover事件的默认行为是打开/下载文件，你当前的代码仅处理了dragenter、dragleave和drop事件，未拦截dragover的默认行为，导致浏览器执行了默认的下载操作。

修复步骤 #

1. 添加dragover事件处理并阻止默认行为 #

修改Blazor标记，补充@ondragover事件绑定及默认行为阻止：

<div class="drag-drop-area @this.Conditional(isDragging, "drag-over")"
     @ondragenter="OnDragEnter"
     @ondragenter:preventDefault
     @ondragover="OnDragOver"
     @ondragover:preventDefault
     @ondragleave="OnDragLeave"
     @ondragleave:preventDefault
     @ondrop="OnDrop"
     @ondrop:preventDefault>

    <div class="h3 text-secondary">
        <i class="fa-solid fa-download"></i>
        <p>Drop a file here</p>
    </div>
</div>

在C#代码中添加对应处理方法（无需额外逻辑，仅确保默认行为被拦截）：

private void OnDragOver(DragEventArgs e)
{
    // 仅通过@ondragover:preventDefault阻止浏览器默认行为
}

2. 优化拖拽状态逻辑（可选） #

避免重复调用StateHasChanged，可先判断状态是否变化再更新：

private bool isDragging = false;

private void OnDragEnter(DragEventArgs e)
{
    if (!isDragging)
    {
        isDragging = true;
        StateHasChanged();
    }
}

private void OnDragLeave(DragEventArgs e)
{
    if (isDragging)
    {
        isDragging = false;
        StateHasChanged();
    }
}

private async void OnDrop(DragEventArgs e)
{
    if (isDragging)
    {
        isDragging = false;
        StateHasChanged();
    }
    
    // 读取拖入的文件数据
    if (e.Data != null && e.Data.Files.Any())
    {
        var file = e.Data.Files.First();
        using var reader = new StreamReader(file.OpenReadStream());
        var fileContent = await reader.ReadToEndAsync();
        // 此处添加文件内容处理逻辑
    }
}

3. 应对服务器端事件延迟（可选） #

若仍存在问题，可能是Blazor服务器端事件的SignalR传输延迟导致默认行为先触发。可通过内联JavaScript即时阻止默认行为：

<div class="drag-drop-area @this.Conditional(isDragging, "drag-over")"
     @ondragenter="OnDragEnter"
     @ondragenter:preventDefault
     @ondragover="event.preventDefault();"
     @ondragleave="OnDragLeave"
     @ondragleave:preventDefault
     @ondrop="OnDrop"
     @ondrop:preventDefault>

    <div class="h3 text-secondary">
        <i class="fa-solid fa-download"></i>
        <p>Drop a file here</p>
    </div>
</div>

这种方式直接在前端拦截默认行为，不受服务器端事件延迟影响。

内容的提问来源于stack exchange，提问作者Matthew Layton