Simplemente hablando, tengo algo como esto.
// Adds listener to capturing phase document.addEventListener('focusin', event => event.stopPropagation(), true); document.querySelector('#my_div') .addEventListener('focusin', event => console.log('my logic'));El primer detector de eventos proviene de la aplicación sobre la que no tengo control. Bloquea todos los focos en la fase de captura (y también está haciendo algo de lógica que omití por simplicidad) y se enfoca en la ventana modal.
Incrusto mi aplicación (es un script de contenido de la extensión de Chrome) en la página y quiero centrarme en la entrada de mi elemento incrustado. No es posible ya que todos los eventos de enfoque son capturados por el oyente del primer elemento y no se propagan a mi elemento.
¿Hay alguna solución a este problema? Tenga en cuenta que no puedo arreglar el primer oyente ya que no tengo control sobre esto ... Cualquier idea (y trucos sucios :) son muy apreciados.
Su oyente focusin está registrado en la segunda fase predeterminada ("burbujeante") ya que no especificó true . El oyente focusin del sitio está registrado con true en addEventListener , por lo que se ejecuta en la primera fase de "captura" (cuando el evento desciende de la window al document y al elemento enfocado) y al usar stopPropagation detiene el envío del evento para que nunca incluso llega a la segunda fase predeterminada donde espera su oyente.
Como se describió anteriormente, el evento en la fase de captura desciende de window , por lo que podemos registrar un detector de captura en la window para que se ejecute antes que el detector de document del sitio:
window.addEventListener('focusin', e => { // For nested inputs the condition should be e.target.closest('#my_div') if (e.target.id === 'my_div') { console.log('my logic'); } }, true);