предотвращение добавления дополнительных eventListeners к элементу dom

Question

Есть ли способ убедиться, что к определенному элементу больше не добавляются прослушиватели событий (в js). Из-за шаблона, который я выбрал после определенных действий, к определенному элементу добавляются некоторые обработчики событий, которые содержат строки, такие как e.preventDefault(); e.stopPropagation();, что мешает моей работе. Так как я не могу удалить эти строки, есть ли способ, которым я могу предотвратить eventHandler присоединяется к элементу?

Answer 1

Это хакерство, но если вы можете запустить код до запуска кода прослушивателя плохих событий, вы можете временно изменить addEventListener на no-op, а затем изменить его обратно:

// Inject this first:
HTMLElement.prototype.addEventListener = () => {
  console.log('Refusing to add bad event listener');
  delete HTMLElement.prototype.addEventListener;
};

// Then the attachment of the bad listener will fail:
document.querySelector('#container').addEventListener('click', (e) => {
  console.log('Bad listener running');
  e.stopPropagation();
});

console.log('Bad code finished, now adding good event listeners again');
// And your other listeners that want to be able to see the event will succeed:
document.body.addEventListener('click', (e) => {
  console.log('Saw click on body');
});

<div id="container">click me</div>

Более сложным методом было бы изучить источник переданной строки функции, чтобы увидеть, содержит ли она preventDefault (или точно соответствует тому, что вы не хотите присоединиться).

Альтернатива, которая не не предусматривает предотвращение присоединения этого слушателя, заключается в добавлении ваших собственных слушателей на этапе захвата до остановки распространения события:

document.querySelector('#container').addEventListener('click', (e) => {
  console.log('Bad listener running');
  e.stopPropagation();
});

console.log('Bad code finished, now adding good event listeners again');
document.body.addEventListener('click', (e) => {
  console.log('Saw click on body');
}, true); // <---- pass 3rd parameter of true to listen in capturing phase

<div id="container">click me</div>