MudBlazor拖拽上传区域移除按钮点击触发文件管理器问题咨询

问题根因 #

透明的.drag-drop-input元素设置了position: absolute和z-index=2，层级高于所有未显式设置z-index的子元素，完全覆盖了整个拖拽区域，点击删除按钮时实际触发了底层透明文件输入框的点击事件，直接唤起文件选择器，拦截了按钮的点击回调。

解决方案（任选一种即可） #

方案1：提升删除按钮的层级 #

给删除按钮设置相对定位和高于2的z-index，让按钮层级高于透明输入框，即可正常响应点击事件。
只需修改Razor中MudButton的Style属性：

<MudButton Color="Color.Error" 
           OnClick="() => Remove(file)" 
           Style="position: relative; z-index: 3;">Remove</MudButton>

该方案改动最小，完全保留原有拖拽、点击选文件的所有功能。

方案2：限制透明输入框的覆盖范围 #

调整.drag-drop-input的尺寸，仅让它覆盖需要触发点击选文件/拖拽的提示区域，不覆盖已上传文件列表区域。比如你的拖拽提示区域高度为100px，就把输入框的高度固定为100px：

.drag-drop-input {
    position: absolute;
    /* 仅覆盖顶部拖拽提示区域，不覆盖下方文件列表 */
    height: 100px; 
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

如果你的拖拽区域是「拖拽提示区+已上传文件列表」上下分离的结构，也可以直接把<input type="file" class="drag-drop-input">移动到上层的拖拽提示容器内，不要放在包含文件列表的父容器中。

方案3：屏蔽输入框的点击事件（仅保留拖拽功能） #

给.drag-drop-input添加pointer-events: none属性，屏蔽它的鼠标点击事件，点击会直接穿透到下层元素，不会影响拖拽上传功能（拖拽事件由父容器捕获即可正常工作）：

.drag-drop-input {
    position: absolute;
    width: 100%;
    height: 90%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    /* 新增以下属性 */
    pointer-events: none;
}

注意：该方案会导致点击拖拽区域无法唤起文件选择器，仅适合只需要拖拽上传、不需要点击区域选文件的场景，需要保留点击选文件功能请选择方案1或2。

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