拖拽上传区域drop事件多次触发，非图片校验alert重复弹出如何解决

你观察到的drop事件重复触发、alert弹出次数和历史操作次数一致，核心原因是同一DOM节点上的drop事件监听器被重复挂载，和事件冒泡、默认行为拦截规则无关。
具体逻辑链路：

• 你封装的setDropZoneWithCropper函数每次执行，都会直接给#add-to-be-cropped-image-section节点新增一套drop、dragover、dragleave监听器，没有做已存在监听器的清理。如果函数的触发时机和用户拖拽操作强绑定（比如每次拖拽完成、裁剪流程结束后重新初始化上传区域），累计的函数执行次数就是监听器的挂载层数，这也完全匹配你观察到的“弹出次数与历史拖拽文件总次数一致”的现象。
• 你之前只在合法图片处理分支加了e.stopImmediatePropagation()，走到非法文件弹alert的分支时，根本没有执行阻断逻辑，所以N个重复绑定的监听器走到else分支时，就会连续触发N次alert，点完当前弹窗的确定按钮，下一个监听器的alert马上弹出。

• 将所有事件回调抽成具名函数，在绑定新监听器前，先精准移除该节点上已存在的同类旧监听器，从根源杜绝重复挂载
• 不管走合法图片还是非法文件分支，都在回调最开始第一时间执行e.stopImmediatePropagation()，阻断同节点上其他重复监听器的执行
• 所有DOM引用使用块级作用域声明（const/let），避免全局变量引发的引用混乱
• 给DOM查询加空值校验，避免目标元素不存在时报错中断初始化流程

// 抽出具名回调，方便后续精准移除重复绑定
function handleDragOver(e) {
    e.preventDefault();
    this.classList.add("draggableImageHover");
}
function handleDragLeave() {
    this.classList.remove("draggableImageHover");
}
function handleDrop(e) {
    e.preventDefault();
    // 回调最开始就阻断同节点上其他监听器的触发，避免重复执行
    e.stopImmediatePropagation();

    const [uploadFile] = e.dataTransfer.files;
    if (!uploadFile) return;

    const allowedImageTypes = ["image/png", "image/jpg", "image/jpeg"];
    if (allowedImageTypes.includes(uploadFile.type)) {
        const reader = new FileReader();
        reader.onload = function (event) {
            if (reader.result !== null) {
                passImageToCropper(reader.result);
            }
        };
        reader.readAsDataURL(uploadFile);
    } else {
        alert("Invalid File Format!");
    }
}

function setDropZoneWithCropper() {
    const toBeCroppedImage = document.getElementById('toBeCroppedImage');
    const droparea = document.querySelector("#add-to-be-cropped-image-section");
    // 空值校验，避免元素不存在时报错
    if (!droparea) return;

    // 绑定前先彻底移除旧的同类监听器，从根源避免重复挂载
    droparea.removeEventListener("dragover", handleDragOver);
    droparea.removeEventListener("dragleave", handleDragLeave);
    droparea.removeEventListener("drop", handleDrop);

    // 重新绑定无重复的干净监听器
    droparea.addEventListener("dragover", handleDragOver);
    droparea.addEventListener("dragleave", handleDragLeave);
    droparea.addEventListener("drop", handleDrop);
}

如果项目里存在document级别的全局drop/dragover事件监听，上述handleDrop里的stopImmediatePropagation逻辑已经可以阻断事件冒泡到document层，不会触发全局监听器的二次执行。如果仍有偶发的重复触发，可以检查是否有其他代码路径给droparea节点绑定了匿名函数的drop回调，这类匿名回调因为无法精准匹配，没法被removeEventListener移除，长期累积也会造成重复触发问题。

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