通过点击外部模态框触发拖放区取消事件

Question

我正在开发一个使用

dropzonejs

上传文件组件的项目。但是，我在尝试使其更加定制时遇到了这个问题。

如果您单击模态窗口（引导模态）的外面，应该触发 dropzonejs 取消按钮事件（警报/确认框，请参阅附图）。但事实并非如此，也从未在文档中看到任何相关内容。

有什么解决办法吗？

Answer 1

我是通过下面描述的这种非常手动和肮脏的方式来的：

我使用 window.onbeforeunload 来制作我认为真实的东西和一面旗帜。重点是，上传过程成功结束后，解绑onbeforeunlad，避免总是询问“您确定要取消本次上传吗？”即使完成了。

var cancelConfirmation = "Are you sure you want to cancel this upload?";

var isFileInProgress = false;

var uploadZone = $("form[class=dropzone]").dropzone({
    method: "post",
    uploadMultiple: false,
    parallelUploads: 1,
    dictCancelUploadConfirmation: cancelConfirmation,
    success: function (file, response) {
        isFileInProgress = false;

        window.onbeforeunload = function () { };
    },
    init: function () {
        this.on("error", function (file, response) {
            isFileInProgress = false;
            
            window.onbeforeunload = function () { /* unbind */ };
        });

        this.on("addedfile", function () {
            isFileInProgress = true;

            window.onbeforeunload = function () {
                return cancelConfirmation;
            };
        });

        this.on("complete", function () {
            isFileInProgress = false;

            window.onbeforeunload = function () { /* unbind */ };
        });

        this.on("canceled", function () {
            isFileInProgress = false;

            window.onbeforeunload = function () { /* unbind */ };
        });
    }
});

$(".modal").on('hide.bs.modal', function (event) {
    if (isFileInProgress && !confirm(cancelConfirmation)) {
        event.preventDefault();
    }
});