Un sitio web muestra un consentimiento de cookies después de aproximadamente 1-2 segundos, si un usuario no ha dado su consentimiento. Eso significa que el consentimiento no está directamente en la fuente sino en el dom después de 1-2 segundos.
Tengo que detectar si un usuario hace clic en un botón dentro del div de consentimiento. Si uso la función de documento listo, no se detecta el clic. Tengo que usar setInterval porque setTimeout no funciona. La razón es que se debe abrir otra ventana en el Consentimiento y, por lo tanto, no puedo usar un tiempo fijo como con un tiempo de espera.
El div Consent está basado en un div con el nombre de clase "cmp-consent". Compruebo el dom con setInterval cada 1800 ms para ese div. Si el div no existe después de 1800 ms, el usuario ya ha dado su consentimiento y borro el setInterval.
PERO:
Si el div existe, espera hasta que el usuario haga clic en el segundo botón en el encabezado de consentimiento. Cuando se hace este clic, se hace otro clic y la ventana se cierra. Esto está funcionando muy bien.
El problema es que si un usuario no hace clic en este botón (botón de encabezado de consentimiento: eq (1)) inmediatamente, setInterval, por supuesto, continuará ejecutándose. Puede ver que el contador delante de console.log está aumentando. Si un usuario luego hace clic en el botón, los clics subsiguientes se llevan a cabo con la frecuencia que haya un setInverval. Esto lleva demasiado tiempo si un usuario espera, por ejemplo, más de un minuto. La pregunta es, ¿cómo logras que una acción solo se realice una vez en un setInterval?
Aquí está mi guión:
var userConsent = window.setInterval(function() { if ($(".cmp-consent")[0]){ console.log('consent exists'); $( ".consent-header button:eq(1)" ).click(function(){ console.log('User clicked the button'); $(".primary button").click(); $(".close-icon").click(); window.clearInterval(userConsent); }); } else { console.log('consent given, remove interval'); window.clearInterval(userConsent); } }, 1800);Aquí hay un ejemplo práctico de la sugerencia de @cloned.
document.addEventListener("click", function(e) { for (var target=e.target; target && target!=this; target=target.parentNode) { // loop parent nodes from the target to the delegation node if (target.matches('.consent-header')) { handler.call(target, e); break; } } }, false); function handler() { console.log('do stuff'); } <div class="consent-header"> <button>I agree</button> </div>