var template = document.querySelector('#template'); var popup = document.querySelector('.popup-bg'); template.addEventListener('mouseleave', function(){ popup.style.display = "block"; }, { once: true });Hola. Una función que muestra una ventana emergente cuando el cursor del mouse sale del elemento. Se supone que funciona en todas las subpáginas, pero se supone que solo funciona una vez. El problema es que cuando ingresas a otra subpágina, se recarga y vuelve a funcionar.
Es suficiente que la función funcione una sola vez, independientemente del cambio de subpágina en una sesión. Puede volver a funcionar (una vez) cuando se visita o se actualiza nuevamente.
Necesito una idea de cómo agregar una función que funcionará una vez y no se recargará, o colocar un elemento/plantilla en toda la ventana, que no se recargará después de cambiar las subpáginas y hacer referencia a ella en la función.
Puede guardar la bandera en el almacenamiento de la sesión para lograr el resultado que desea, como en este ejemplo
var template = document.querySelector('#template'); var popup = document.querySelector('.popup-bg'); if (!sessionStorage.getItem('popup')) { sessionStorage.setItem('popup', 'set'); template.addEventListener('mouseleave', function(){ popup.style.display = "block"; }, { once: true }); }