Clash Royale CLAN TAG#URR8PPP

Can you kill event listeners in a content script that listen to underlying page events?

I have a Chrome Extension that, in a content script, listens for specific events on the page it is injected into.

The listeners are created on a focusin event - because the elements I want to listen for only exist in certain situations.

Everything works great...except every time the user focusins (understandably) new listeners are created. So I end up with many duplicate events.

My Extension works with very specific pages, so I know whether they have Jquery or not...this one does.

In the focusin listener I have:

$('.PageClass_I_listen_for').blur(function()
console.log('blurred out of comment area...');
//Do something
);


I've tried including 'off' commands at the start of the focusin listener - to kill any existing event listeners before adding a new one. The following code does not have any effect:

$(document).off('click', '.PageClass_I_listen_for'); // Kill events


Perhaps you cannot kill events (understandably) that are part of a page into which your code is injected?

Any way to get around this?

Help appreciated!

off

blur

click

jQuery.off

off

1 Answer
1

Rather than attach event listeners directly to elements, I strongly you use event delegation.

Basically, you attach a single event listener somewhere in the hierarchy above the element you're interested in. Then, it doesn't matter if elements are added or removed dynamically later on.

$(document).on( 'blur', '.PageClass_I_listen_for', function( e )
// use e.currentTarget here
);


Your code for .off doesn't work because you are not removing from the same elements you are adding the events to, nor are you removing the same type of event. You added the event directly to the elements, but you removing events delegated to document.

.off

document

See: https://learn.jquery.com/events/event-delegation/

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.