无法删除 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

没有任何效果！

我使用 jquery 方法 on() 添加了我自己的事件监听器，但它从未被调用。看来旧的事件监听器是在我之前执行的......它对按钮上的 onClick 事件做同样的事情。

我必须明确说明我在 Chrome 扩展中，更准确地说是在页面中注入的内容脚本中。

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

编辑：在编写了很多丑陋的代码之后，我找到了一种方法来做我想做的事……我复制了一份表单，删除了内联事件处理程序，用我的旧表单替换了 dom 中的旧表单，然后创建我的事件处理程序。这很丑，但它有效......如果有人能解释为什么我不能这样做......

Answer 1

这是一个isolated world 问题。 Chrome 扩展运行是一个独立于页面的上下文；虽然对 DOM 的访问是共享的，但 内联事件侦听器是隔离的。

引用文档，强调我的：

值得注意的是，页面和扩展程序共享的 JavaScript 对象会发生什么 - 例如，window.onload 事件。每个孤立的世界都会看到自己的对象版本。 分配给对象会影响您对该对象的独立副本。例如，页面和扩展都可以分配给window.onload，但两者都无法读取对方的事件处理程序。事件处理程序按照它们被分配的顺序被调用。

因此，要覆盖页面级侦听器，您需要将覆盖代码注入页面上下文本身。这个有可能;有关详细信息，请参阅this excellent answer，这是一个示例：

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> 元素添加到页面，然后在页面自己的上下文中执行。

Answer 2

试试这个：

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

它将停止事件的传播。

Answer 3

我其实不知道这里正在处理'onSubmit'事件的对象，所以这里使用伪逻辑：

1. 识别正在处理其事件的对象 - 比如说 obj。
2. 识别它的注册事件 - console.log(obj._events); - 说它返回提交[函数]
3. 清除回调：obj._events.submit = null;
4. 注册您的处理程序。

希望这会有所帮助。