¿Agregar un MutationObserver al elemento principal del elemento [data-uia=timeline-bar] que observa cuando sus hijos cambian, por ejemplo, se agrega la barra de línea de tiempo? y en la devolución de llamada, adjunta un oyente una vez que se agrega el elemento de barra de línea de tiempo?

 // The timeline-bar's parent's data-uia is "timeline" in the Netflix player DOM. let parent = document.querySelector("[data-uia=timeline]"), options = { childList: true }, observer = new MutationObserver(mCallback); observer.observe(parent, options); function mCallback (mutations) { for (let mutation of mutations) { if (mutation.type === 'childList') { for(let node of mutation.addedNodes){ if(node.getAttribute("data-uia") === "timeline-bar"){ node.addEventListener('click', () => { alert("clicked"); // Do click stuff... }); } } } } } // To test the observer btnAttr.addEventListener('click', function () { let el = document.createElement("div"); el.setAttribute("data-uia", "timeline-bar"); el.innerText = "A TIMELINE-BAR"; parent.appendChild(el); }, false);

codepen aquí: https://codepen.io/freedruk/pen/powaKBy

De hecho, su objetivo necesita trabajo duro, ya que los elementos dom se crean y eliminan de forma permanente. El único enfoque que puedo proponer ciertamente puede considerarse sucio, pero al menos puedes intentarlo;)

 $("[data-uia='player']").on("DOMSubtreeModified", function(){ const ref = "div[data-uia='timeline-knob']"; if($(ref)){ $(ref).off("mouseover").on("mouseover", function(event){ const that = $(this); const previousSibling = event.target.previousSibling; if(previousSibling.style.left){ console.log("Click presumed"); } else { console.log("released"); } }); }; });

El truco consiste en observar el objeto de la perilla de la línea de tiempo y analizar la situación en el div hermano anterior, porque se producen algunos repintados cuando el mouse está sobre la línea de tiempo.

Es solo una solución, espero que esto pueda ayudarte :) ¡Que tengas un buen día!

[EDITAR 1]

Una forma más elegante:

 const ref = "div[data-uia='timeline'].active"; const onclick = (e) => { console.log("clicked on", e); }; const prepare = (obj, e) => { $(e.target).css("pointer-events","auto").css("border", "0.1px solid rgba(255,255,255,0)"); $(obj).off("click.test").on("click.test", (clickevent) => {onclick(clickevent.target);}); }; $("[data-uia='player']").on("DOMSubtreeModified", function(modevent){ $(ref).each(() => { prepare(ref,modevent); }); });

Tuve que enfrentar varias dificultades:

1. incluso el nodo "línea de tiempo" se regenera, por lo que debemos adjuntarle el evento "clic" en cada modificación del "jugador"
2. básicamente, a menudo tenemos que hacer clic en divs vacíos (por ejemplo, exactamente en la línea de tiempo), y luego no se activa ningún evento de "clic", por lo que le aplicamos un diseño casi invisible para obligar al navegador a considerarlo como un nodo en el que se puede hacer clic.
3. y no menos importante: Netflix usa la propiedad css "pointer-events" para bloquear algunos eventos de "clic", por lo que tenemos que arreglarlo de nuevo en "auto"

Probé este código varias veces y parece funcionar bien ;)