Moodle框架下无法捕获Modal右上角‘X’关闭事件的技术求助

针对你的问题，核心思路是利用Moodle Modal的hidden事件，通过判断触发关闭的元素来区分是否是点击了右上角的X按钮，从而只在这种情况下调用你的modalHandler函数，避免和save、cancel等事件冲突。

解决方案代码 #

hiddenbtn.on('click', function() {
    ModalFactory.create({
        type: ModalFactory.types.SAVE_CANCEL,
        title: 'Previous Activity Detected',
        body: 'Do you want to start from where You left?',
    }).then(function(modal) {
        modal.setSaveButtonText('Yes');
        let root = modal.getRoot();
        
        // 处理Save按钮逻辑
        root.on(ModalEvents.save, function() {
            recognition.videoTempid.currentTime = data.timestamp;
        });
        
        // 统一Cancel/外部点击/X按钮的逻辑处理函数
        const handleExitConfirmation = () => {
            modalHandler();
        };
        
        // 绑定Cancel和外部点击事件
        root.on(ModalEvents.cancel, handleExitConfirmation);
        root.on(ModalEvents.outsideClick, handleExitConfirmation);
        
        // 监听模态框隐藏事件，判断是否是右上角X按钮触发
        root.on(ModalEvents.hidden, function(event) {
            // 获取模态框的关闭按钮（Moodle自动生成的X按钮带modal-close类）
            const closeBtn = root.find('.modal-close')[0];
            // 检查触发关闭的元素是否为X按钮
            if (event.relatedTarget === closeBtn) {
                handleExitConfirmation();
            }
        });
        
        modal.show();
    });
});

原理说明 #

1. 抽离重复逻辑：把modalHandler()的调用封装成handleExitConfirmation函数，减少代码冗余。
2. 区分隐藏触发源：Moodle模态框触发hidden事件时，event.relatedTarget会指向实际触发关闭操作的DOM元素。右上角的X按钮默认带有modal-close类，通过对比这个元素和relatedTarget，就能精准判断是否是点击X按钮导致的关闭。
3. 避免冲突：save按钮触发模态框隐藏时，relatedTarget是save按钮元素，不会进入X按钮的判断分支，因此不会干扰原有逻辑。

如果实际DOM中关闭按钮的类名不是modal-close，可以通过浏览器开发者工具查看元素的类名，替换成对应的选择器即可。

内容的提问来源于stack exchange，提问作者Rohit -