javascript - 多次触发 Drop 事件

Question

所以我已经为拖放区域实现了这个逻辑，如果用户添加一个非图像文件，我会提醒用户该文件不是图像并且它的格式无效。

在此处输入图像描述

但是一旦我按下确定，警报就会再次出现，并且有时会持续多次（我实际上计算了这个，计数等于你拖放文件的次数）。下面是该方法的相关代码：

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 Drop 多次触发，我通过一些控制台日志了解到，我该如何解决这个问题？

标签： javascripthtmljquerydrag-and-dropdraggable

Answer 1

这对我有用，在 else 子句中添加这个 alert ：

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