Apliqué el evento de desplazamiento de la ventana y luego obtengo elementos con document.querySelectorAll. Entonces, después de ejecutar esto, tengo NodeList. Estoy recorriendo esta lista de nodos con forEach. En forEach, estoy activando un evento de clic en el elemento. Pero mi evento de clic se activa varias veces. Cómo puedo manejarlo.
Nota: Ejecute este código en la página de inicio de vimeo. https://vimeo.com/home
window.addEventListener("scroll",()=>{ var config = document.querySelectorAll("[data-config-url]"); config.forEach((item)=>{ item.addEventListener("click",(e)=>{ var configData = e.currentTarget.getAttribute("data-config-url"); console.log(configData); }); }); });Quiero registrar los datos de configuración del artículo por única vez.
Como se indicó en mis comentarios anteriores, no pude encontrar el escenario que describiste en la URL https://vimeo.com/home . Ni siquiera al adoptar la simulación de pantalla móvil. Estoy usando Firefox 101.0.1 (64 bits) en Windows 10 en este momento.
document.querySelectorAll("[data-config-url]").length siempre devuelve cero y eso es cierto también después de intentar navegar por la página, desplazarse, abrir bloques de menú, etc. No inicié sesión porque no tengo una cuenta y no especificaste cómo se supone que se debe visitar la página más allá de la propia URL.
De todos modos, cuando se golpea el escenario, ese es el código que implementa la lógica que sugerí en mis comentarios. Acabo de modificar ligeramente su código para que el controlador se agregue solo si el elemento no se procesó previamente.
Luego repite la operación una vez cada 500ms:
setInterval(scanPageAndAddHandlers, 500); function scanPageAndAddHandlers(){ console.log('scanning...'); var config = document.querySelectorAll("[data-config-url]"); config.forEach((item)=>{ if (item.dataset.handlerWasAdded != 'true'){ //add the listener for the click event to the item element item.addEventListener("click",(e)=>{ var configData = e.currentTarget.getAttribute("data-config-url"); console.log(configData); }); //mark this item as processed item.dataset.handlerWasAdded = 'true'; } }); }