无法删除chrome中的内联事件处理程序

Question

我想删除一个包含onsubmit内联定义的表单的事件处理程序.

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

我已经尝试过:

$("#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

什么都行不通!

我在j()的jquery方法中添加了我自己的事件监听器,但它永远不会被调用.它是旧的事件监听器在我之前执行的...它与按钮上的onClick事件做同样的事情.

我必须明确表示我正在使用chrome扩展,更确切地说是在页面中注入的内容脚本中.

所以问题是,有没有办法清除事件处理程序？或者更好的是有没有办法添加一个将在内联处理程序之前调用的事件监听器？

编辑:经过许多丑陋的代码,我找到了一种方法来做我想要的...我做了一个表单的副本,删除内联envent处理程序,在我的dom旧表单中替换然后创建我的事件处理程序.这很难看,但它有效...如果有人能解释为什么我不能这样做...

Answer 1

这是一个孤立的世界问题.Chrome扩展程序运行是与页面分开的上下文; 在共享对DOM的访问时,内联事件侦听器是隔离的.

从文档引用,强调我的:

值得注意的是页面和扩展共享的JavaScript对象会发生什么 - 例如,window.onload事件.每个孤立的世界都会看到自己的对象版本.分配给对象会影响对象的独立副本.例如,页面和扩展都可以分配给window.onload,但是没有人可以读取另一个的事件处理程序.事件处理程序按照分配顺序进行调用.

因此,要覆盖页面级侦听器,您需要将覆盖代码注入页面上下文本身.这个有可能; 有关详细信息,请参阅此优秀答案,以下是一个示例:

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);

这会<script>向页面添加一个元素,然后在页面自己的上下文中执行.