如何将modalData变量传递给clickOutsideModalHandler事件处理函数且不报错

问题原因 #

modalData是shown.bs.modal事件回调内的局部变量，默认作用域仅在该回调函数内部，外部定义的clickOutsideModalHandler无法直接访问该变量。同时你原有代码的处理函数没有显式接收event参数，部分浏览器下直接调用全局event会出现兼容性报错。

推荐解决方案（使用jQuery事件数据传参，解绑逻辑无改动） #

jQuery的on方法支持直接传入自定义数据作为事件参数，处理函数可以通过event.data直接读取，无需修改原有解绑逻辑，也不会产生闭包内存泄漏风险。
修改后的完整代码如下：

$('.modal').on('shown.bs.modal', function() {
    var modalData = {
        confirmText: $(this).data('confirm-text'),
        cancelText: $(this).data('cancel-text'),
        confirmMessage: $(this).data('confirm-message')
    };
    // 第二个参数传入自定义数据，绑定事件
    $(document).on('click', modalData, clickOutsideModalHandler);
});

$('.modal').on('hide.bs.modal', function() {
    // 解绑逻辑和原有保持一致，用off比unbind更符合jQuery新版规范
    $(document).off('click', clickOutsideModalHandler);
});

function clickOutsideModalHandler(event) {
    // 从event.data中读取传递的modalData
    const modalData = event.data;
    var obj = $(".modal-content");

    if (!obj.is(event.target) && !obj.has(event.target).length) {
        var formFieldset = obj.find("form").find("fieldset").attr("disabled");
        if(formFieldset !== "disabled") {
            // 可以直接使用modalData里的字段替换原有固定文本
            yii.confirm(modalData.confirmMessage || "send form?", function(){
                obj.find("form").submit();
            });
        }
    }
}

备选方案（闭包传参） #

如果不想用事件数据的方式，也可以通过闭包包装处理函数传递参数，需要注意将闭包函数存储下来用于后续解绑：

// 存储闭包函数用于解绑
let currentOutsideHandler = null;

$('.modal').on('shown.bs.modal', function() {
    var modalData = {
        confirmText: $(this).data('confirm-text'),
        cancelText: $(this).data('cancel-text'),
        confirmMessage: $(this).data('confirm-message')
    };
    // 生成闭包函数，把modalData作为参数传入
    currentOutsideHandler = function(event) {
        clickOutsideModalHandler(event, modalData);
    };
    $(document).click(currentOutsideHandler);
});

$('.modal').on('hide.bs.modal', function() {
    $(document).unbind('click', currentOutsideHandler);
    currentOutsideHandler = null;
});

function clickOutsideModalHandler(event, modalData) {
    var obj = $(".modal-content");
    if (!obj.is(event.target) && !obj.has(event.target).length) {
        var formFieldset = obj.find("form").find("fieldset").attr("disabled");
        if(formFieldset !== "disabled") {
            yii.confirm(modalData.confirmMessage || "send form?", function(){
                obj.find("form").submit();
            });
        }
    }
}

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