reactjs 未触发SQL API onclose事件

rt4zxlrg  于 11个月前  发布在  React
关注(0)|答案(1)|浏览(153)

我正在尝试在我们的应用程序中从使用Notification API创建的通知中启动一些行为。我这样做取得了一些成功,但是无论用户单击通知还是通过单击X关闭通知,我们都需要相同的行为,并且无论出于何种原因,onclose事件都不会触发。这是一个react应用程序,代码如下所示:

`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 // this makes the dialog stay open until someone clicks it 
        }) 

        const testEvent = (event: Event) => { 
            event.preventDefault() 
            // more lines of code here with what should happen when the 
            // notification is clicked/closed 
        }

        notification.onclick = (event) => testEvent (event) 
        notification.onclose = (event) => testEvent (event) 
    } 

}`

字符串
我尝试的是将相同的函数调用分配给click和close处理程序。我希望这两个操作具有相同的行为。实际发生的是close事件根本不会被触发。

a6b3iqyw

a6b3iqyw1#

问题出在本机通知上。close事件仅在单击“关闭”按钮以关闭通知时触发,但在右下角带有十字(x)的隐藏通知、超时隐藏(本机约为6秒)或滑动通知(在触摸屏上)时不会触发。
关闭按钮通常不显示,这就是为什么它看起来像close事件从未被触发。所以你必须使用特殊选项requireInteraction: true。然后将没有超时,“关闭”按钮和功能onclose事件:)
范例:

let n = new Notification('this is my notification with close', {requireInteraction: true});
n.addEventListener('close', ()=>{
    alert('onclose event triggered!');
});

字符串

相关问题