Notifications API onclose事件未触发问题求助

你遇到的onclose事件不触发问题，主要和事件绑定方式、event.preventDefault()的无效调用以及requireInteraction: true的特性有关，以下是具体修复方案：

核心问题拆解 #

1. onclose属性绑定的兼容性问题：直接使用notification.onclose = ...这种属性绑定方式，在部分浏览器或场景下可能失效，不如标准的addEventListener可靠。
2. preventDefault()的无效干扰：Notification的close事件是不可取消的（event.cancelable为false），调用event.preventDefault()不会产生任何效果，反而可能干扰事件的正常执行流程。
3. requireInteraction: true的特性：该属性让通知保持活跃直到用户手动操作，但需要确保事件监听器正确绑定到通知实例上。

修复后的代码 #

async function showNotification() {
    if (Notification.permission !== "granted") {
        await Notification.requestPermission()
    }

    if (Notification.permission === "granted") { 
        const notification = new Notification('New Camera Alerts', { 
            body: 'There are new notifications to review in the Notification Panel', 
            icon: `${logo}`, 
            requireInteraction: true
        }) 

        const testEvent = (event: Event) => { 
            // 移除无效的event.preventDefault()
            console.log(`触发事件：${event.type}`); // 可用于验证事件类型
            // 执行你的业务逻辑
            // more lines of code here with what should happen when the 
            // notification is clicked/closed 
        }

        // 使用标准的addEventListener绑定事件
        notification.addEventListener('click', testEvent);
        notification.addEventListener('close', testEvent);
    } 
}

额外排查建议 #

• 检查浏览器控制台是否有报错（比如logo路径错误导致通知渲染异常，间接影响事件触发）。
• 在testEvent中打印event.type，确认事件是否正常触发以及触发类型。
• 确保通知权限确实为granted，避免因权限问题导致通知未创建。

内容的提问来源于stack exchange，提问作者Larissa Loomis