Javascript 多次触发丢弃事件

因此，我为拖放区实现了这个逻辑，如果用户添加了一个非图像文件，我会提醒用户该文件不是图像，并且格式无效

但一旦我按下ok，警报会再次出现，有时还会持续多次（我实际计算了这一次数，该次数等于您拖放文件的次数）。以下是该方法的相关代码：

function setDropZoneWithCropper() {
var toBeCroppedImage = document.getElementById('toBeCroppedImage');
droparea = document.querySelector("#add-to-be-cropped-image-section");

droparea.addEventListener("dragover", (e) => {
    e.preventDefault();
    droparea.classList.add("draggableImageHover");
});

droparea.addEventListener("dragleave", () => {
    droparea.classList.remove("draggableImageHover");
});

droparea.addEventListener("drop", (e) => {
    e.preventDefault();

    const image = e.dataTransfer.files[0];
    const type = image.type;

    if (
        type == "image/png" ||
        type == "image/jpg" ||
        type == "image/jpeg"
    ) {
        var reader = new FileReader();
        // reader.onload = function (event) {
        //     passImageToCropper(reader.result);
        // };
        // reader.readAsDataURL(file)

        reader.onload = function (event) {
            if(reader.result !== null){
                passImageToCropper(reader.result);
            }
        };

        if (image) {
            reader.readAsDataURL(image);
        }
    } else {
        alert("Invalid File Format!");
    }
});

}

如您所见，addEvent侦听器是：

    droparea.addEventListener("drop", (e) => {
    e.preventDefault();

    const image = e.dataTransfer.files[0];
    const type = image.type;

    if (
        type == "image/png" ||
        type == "image/jpg" ||
        type == "image/jpeg"
    ) {
        var reader = new FileReader();
        // reader.onload = function (event) {
        //     passImageToCropper(reader.result);
        // };
        // reader.readAsDataURL(file)

        reader.onload = function (event) {
            if(reader.result !== null){
                passImageToCropper(reader.result);
            }
        };

        if (image) {
            reader.readAsDataURL(image);
        }
        e.stopImmediatePropagation();
    } else {
        alert("Invalid File Format!");
    }
});

---

Addevent listener多次触发，我通过一些控制台日志了解到了这一点，如何解决这个问题？

这对我来说很有效，在警报后的else子句中添加以下内容：

 else {
            alert("Invalid File Format!");
            e.stopImmediatePropagation();
        }