CODEWITHSUNDEEP
javascriptjquerygoogle-chromeeventsgoogle-chrome-extension
Emrys Myrooin
Emrys Myrooin

Reputation: 2231

Can't remove inline event handler in chrome

I want to delete an event handler form a form that contains an inline definition of onsubmit.

<form id="loginForm" onsubmit="return performTask(this);">

I have already try :

$("#loginForm").off("submit")
$("#loginForm").unbind("submit")
$("#loginForm").die("submit")
$("#loginForm").removeAttr("onsubmit")
$("#loginForm").removeProp("onsubmit")
$("#loginForm").attr("onsubmit", "")
$("#loginForm").prop("onsubmit, "")
$("#loginForm")[0].onsubmit = null
$("#loginForm")[0].onsubmit = undefined
$("#loginForm")[0].onSubmit = null
$("#loginForm")[0].onSubmit = undefined

And nothing works !

I add my own event listener usin jquery method on() but it is never called. It apear that the old event listener is executed before mine... It does the same thing with onClick event on button.

I have to explicit that I'm in a chrome extension and more precisely in a Content Script injected in a page.

So the question is, is there any way to purge event handlers ? Or much better is there any way to add an event listener that will be call before the inline handler ?

EDIT : After lot of ugly code, I have find a way to do what I want... I do a copy of the form, delete the inline envent handler, replace in the dom the old form by mine and then create my event handler. It's ugly but it works ... If anyone can explain why I can't do this other way ...

Upvotes: 3

Views: 1258

Answers (3)

Xan
Xan

Reputation: 77541

This is an isolated world problem. Chrome extensions run is a separate context from the page; while access to the DOM is shared, inline event listeners are isolated.

Quote from the documentation, emphasis mine:

It's worth noting what happens with JavaScript objects that are shared by the page and the extension - for example, the window.onload event. Each isolated world sees its own version of the object. Assigning to the object affects your independent copy of the object. For example, both the page and extension can assign to window.onload, but neither one can read the other's event handler. The event handlers are called in the order in which they were assigned.

So, to override a page-level listener, you need to inject your overriding code into the page context itself. This is possible; see this excellent answer for details, and here's an example:

var actualCode = "document.getElementById('loginForm').onsubmit = null;";
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

This adds a <script> element to the page, which then executes in the page's own context.

Upvotes: 6

ER144
ER144

Reputation: 690

Try this:

window.addEventListener('submit', function(event) {
    event.stopImmediatePropagation();
}, true);

It will stop the propagation of the event.

Upvotes: 0

Gireesh Punathil
Gireesh Punathil

Reputation: 1374

I actually don't know the object whose 'onSubmit' event is being processed here, so using pseudo logic here:

  1. Identify the object whose event is being processed - say obj.
  2. Identify it's registered events - console.log(obj._events); - say it returns submit [ Function ]
  3. Purge the call back: obj._events.submit = null;
  4. Register your handler.

Hope this helps.

Upvotes: -1

Related Questions