{"id":3669,"date":"2024-08-27T13:39:43","date_gmt":"2024-08-27T18:39:43","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3669"},"modified":"2024-08-27T13:39:44","modified_gmt":"2024-08-27T18:39:44","slug":"closewatcher","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/closewatcher\/","title":{"rendered":"CloseWatcher"},"content":{"rendered":"\n

I’m first hearing about the CloseWatcher<\/code> API after running across Abdelrahman Awad’s blog post<\/a> about it. The MDN docs are quite direct<\/a>, making the purpose clear:<\/p>\n\n\n\n

\n

Some UI components have “close behavior”, meaning that the component appears, and the user can close it when they are finished with it. For example: sidebars, popups, dialogs, or notifications.<\/p>\n\n\n\n

Users generally expect to be able to use a particular mechanism to close these elements, and the mechanism tends to be device-specific. For example, on a device with a keyboard it might be the Esc<\/kbd> key, but Android might use the back button.<\/p>\n<\/blockquote>\n\n\n\n

So rather than bind an closing action to the Esc<\/code> key, use this API, which normalizes that user action across platforms. <\/p>\n\n\n\n

I also like how it automatically creates a “stack” of things to close. So if there are multiple closeable things open, a close event only closes the most recently open one. I made a demo to play with this<\/a> (note the Chrome-n-friends only support!<\/strong>).<\/p>\n\n\n\n\n\n\n\n