# How to detect when the user navigates away from the app window?

**URL:** <https://discourse.elm-lang.org/t/how-to-detect-when-the-user-navigates-away-from-the-app-window/10398>\
**Category:** Learn\
**Created:** [August 16, 2025, 5:33pm UTC](https://discourse.elm-lang.org/t/how-to-detect-when-the-user-navigates-away-from-the-app-window/10398 "2025-08-16T17:33:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlanQ](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@AlanQ](https://discourse.elm-lang.org/u/AlanQ)\
**Post date:** [August 16, 2025, 5:33pm UTC](https://discourse.elm-lang.org/t/how-to-detect-when-the-user-navigates-away-from-the-app-window/10398/1 "2025-08-16T17:33:38Z")

</div>

Typically, when I’m editing something in a native app — such as an email — and I navigate away from the app to another app, or to the main screen, I get a notification that says “Saved”.

I need to do something similar in my Elm app.

`Html.Events.onFocus` and `Html.Events.onBlur` (and the elm-ui equivalents) don’t seem to do what I want — in fact they don’t seem to do anything — and `Html.Events.on “focusin”` and `Html.Events.on “focusout”` seem to have strange behaviour — see [How to detect focus and blur](https://discourse.elm-lang.org/t/how-to-detect-focus-and-blur/10397)

`Browser.Events.onVisibilityChange` detects when the app window is gone from sight, but what about when someone simply clicks on another window when the app is on a desktop? How can I detect that kind of ‘navigating away’?

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [August 16, 2025, 8:22pm UTC](https://discourse.elm-lang.org/t/how-to-detect-when-the-user-navigates-away-from-the-app-window/10398/2 "2025-08-16T20:22:15Z")

</div>

It sounds like you are looking for the [blur event on window](https://developer.mozilla.org/en-US/docs/Web/API/Window/blur_event).

You can add an event listener for it with JavaScript and call a port in it.

---

<div class="post-metadata">

**Author:** ![AlanQ](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@AlanQ](https://discourse.elm-lang.org/u/AlanQ)\
**Post date:** [August 17, 2025, 3:11pm UTC](https://discourse.elm-lang.org/t/how-to-detect-when-the-user-navigates-away-from-the-app-window/10398/3 "2025-08-17T15:11:49Z")

</div>

Ah 🙂 blur event on _window_ ! That’s almost certainly it. I was conflating element and window!  
Thank you, Simon @lydell

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [August 27, 2025, 3:11pm UTC](https://discourse.elm-lang.org/t/how-to-detect-when-the-user-navigates-away-from-the-app-window/10398/4 "2025-08-27T15:11:54Z")

</div>

Closed on August 27, 2025, 3:11pm UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.