We have a scenario when regarding of screen variable value we should prevent user from navigating out of the screen. For example user have form filled but not saved and we want to show confirmation dialog "you have unsaved changes. Go back / Continue options" when user tries to navigate to another screen.
For elements on same web block we have no issue. However when user click links in menu for example (from another weblock) we have no control over it as onDestroy is called after navigation was already performed. We are testing different options like adding event listener to all links or to pass input parameters to all blocks that we need to prevent navigation on. However this solutions seems not to be very scalable nor efficient for the scenarios where more web blocks or elements are involved.
Thank you
Attach global event listeners to catch navigation events or other actions that might trigger a change. This could include listening for clicks on links or navigation actions. When such an event is detected, check for unsaved changes and show the confirmation dialog accordingly. This way, you centralize the control logic and reduce the need to add listeners to individual elements.
Example (using JavaScript with jQuery):
$(document).on('click', 'a', function(event) { // Check for unsaved changes if (unsavedChangesExist()) { // Show confirmation dialog if (!confirm('You have unsaved changes. Do you want to continue?')) { event.preventDefault(); // Prevent navigation } }});