【Oracle APEX开发小技巧5】点击页面除模式对话框外的其它区域，能够自动关闭模式对话框，而不需要点解右上角的“X”来关闭

 1.0版本（有缺陷）

var count = 1;
const parentElement = $('body')[0];

// 添加点击事件监听器
parentElement.addEventListener('click', function (event) {

    // 遮罩层 
    var diag = $('div[class="ui-widget-overlay ui-front"]');

    if (diag.length > 0) {
        if (count % 2 == 0) {
            count = 1;
            apex.navigation.dialog.cancel(true);
        } else {
            count++;
        }
    }
});

【解析】

这段代码是JavaScript代码，主要功能是在网页的body元素上添加一个点击事件监听器。当用户点击页面时，会执行以下操作：

1. 获取名为"ui-widget-overlay ui-front"的div元素，这个元素可能是一个遮罩层。
2. 检查是否存在这样的遮罩层元素。如果存在，则执行以下操作：
   a. 如果变量count是偶数，将其重置为1，并调用apex.navigation.dialog.cancel(true)方法取消对话框。
   b. 如果变量count是奇数，将其加1。

这段代码的主要目的是在用户点击遮罩层时，交替地取消对话框。

【存在问题】

但是上面这种解决方式还是存在问题，会出现点击模式对话框的内置详情页后，退出内置详情页想用同样的方式关闭模式对话框需要点两次，而且点击内置详情页的“X”关闭会把模式对话框也一起关闭，由此进一步改进：

2.0 版本（改进优化版）

var count = 1;
const parentElement = $('body')[0];

// 添加点击事件监听器
parentElement.addEventListener('click', function (event) {
    event.stopPropagation();
    // 遮罩层 
    if (event.target.className === 'ui-widget-overlay ui-front') {
        apex.navigation.dialog.cancel(true);
    }
    // var diag = $('div[class="ui-widget-overlay ui-front"]');
    // console.log($('div[class="ui-widget-overlay ui-front"]'))
    // //  alert(diag.length)
    // if (diag.length >0 ) {
    //     if (count % 2 == 0) {
    //         // alert(count)
    //         count = 1;
    //         apex.navigation.dialog.cancel(true);
    //     } else {
    //         count++;
    //     }
    // }
});

【解析】

这段代码是用于在网页中添加一个点击事件监听器。当用户点击页面时，会触发这个监听器。监听器首先阻止事件冒泡，然后检查被点击的元素的类名是否为 'ui-widget-overlay ui-front'。如果是，那么调用 apex.navigation.dialog.cancel(true) 方法来取消对话框。