Estoy tratando de construir una función de utilidad que siga los siguientes criterios:

• (selectores: cadena[]) => vacío
• Elimina todos los detectores de eventos de la página, excepto los elementos que coinciden con los selectores proporcionados en la matriz.
• No usa la función getEventListeners en la API de Chrome

Algunos factores importantes:

• No sé ni tengo acceso a las funciones que se pasaron al agregar un detector de eventos a cada uno de estos elementos, por lo que removeEventListener está fuera de discusión
• Idealmente, no quiero inyectar un script antes de que se ejecuten los scripts de la página para anular el método addEventListener. Pero si eso es necesario, que así sea.

Aquí hay un ejemplo de algo que ya he probado:

 // only using "getEventListeners" because I'm testing this in devtools getEventListeners(document.querySelector('#server')) // has event listeners const removeAllEventListenersExcept = (selectors = []) => { // loop through all dom nodes for (const node of [...document.querySelectorAll('*')]) { // if it matches one of our selectors, skip it // this gets logged, so why is the listener still being removed? if (selectors.some((s) => node.matches(s))) return console.log('hi'); // else, make a clone of the node (which removes its event listeners) const clone = node.cloneNode(true) // replace the one in the dom with the new clone node.parentNode.replaceChild(clone, node) } } removeAllEventListenersExcept(['#server']) getEventListeners(document.querySelector('#server')) // no event listeners on it

Aquí está mi implementación usando getEventListeners que funciona bien (centrándose en los oyentes de clics); sin embargo, una vez más, no puedo usar esto:

 const getAllWithClickListeners = () => { const elems = Array.from(document.querySelectorAll('*')) elems.push(window) elems.push(document) const listeners = [] elems.forEach((elem) => { const result = getEventListeners(elem) if (Object.values(result).length && result.click) { listeners.push({ node: elem, ...result }) } }) return listeners; } const removeAllClickListenersExcept = (selectors = []) => { const allWithClickListeners = getAllWithClickListeners() for (const { node, click } of allWithClickListeners) { if(selectors.some((s) => node.matches(s))) return; for (const listener of click) { // click === array of the node's click listeners node.removeEventListener('click', listener.listener, listener.useCapture) node.removeAttribute('onclick') } } } removeAllClickListenersExcept(['#server'])

Todas las sugerencias son bienvenidas. He estado buscando ideas en Internet, así que por favor no critiquen mi pregunta solo porque el título es similar a otras preguntas. Incluso mi jefe de proyecto está perplejo.