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方法添加我自己的事件监听器，但它永远不会被调用。它是旧的事件监听器在我之前执行的...它与按钮上的onClick事件做同样的事情。

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

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

编辑：在很多丑陋的代码之后，我找到了一种方法来做我想要的...我做了一个表单的副本，删除内联envent处理程序，在我的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

我实际上并不知道其中提交的对象＆＃39;这里正在处理事件，所以在这里使用伪逻辑：

识别正在处理其事件的对象 - 例如obj。
确定已注册的事件 - console.log（obj._events）; - 说它返回提交[功能]
清除回调：obj._events.submit = null;
注册您的处理程序。

希望这有帮助。

Answer 3

试试这个：

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

它将阻止事件的传播。

无法删除chrome

3 个答案: