防止表单提交导致调试时重定向

Question

我不确定要在这里添加哪些标签。

我正在向 JavaScript 中的 formSubmit 事件添加一些跟踪。我想通过在浏览器中多次提交表单来进行实验，并想知道 Chrome 中是否有某些设置或我可以在控制台中输入的某些 JS 会阻止表单在提交时重定向？

Answer 1

如果你的页面上有 jQuery，并且你的表单有一个 ID，你可以在调试之前在控制台中运行它：

$("#formId").submit(function(e){ e.preventDefault(); });

这可以在没有任何条件的情况下更详细地完成，如下所示：

document.getElementsByTagName("form")[0].onsubmit = function(e) {
  e.preventDefault();
};

第二个假设有问题的表单是页面上的第一个表单。该指数可能需要调整。

对于所有带有 jQuery 的表单：

$("form").submit(function(e){ e.preventDefault(); });

或者没有 jQuery：

Array.from(document.getElementsByTagName("form")).forEach(
  (form) => {
    form.onsubmit = function(e) { e.preventDefault(); };
  });

注意 - 该函数是通过 Array 原型调用的，因为document.getElementsByTagName返回 HTMLCollection 而不是 Array。

对于没有 jQuery 的两者，如果您尝试测试已经绑定到表单的提交处理程序，则可能会遇到问题。如果是这种情况，请更换

form.onsubmit = function(e) { e.preventDefault(); };

有了这个：

form.addEventListener("submit", function(e) {
  e.preventDefault();
});

它稍长一些，但不会覆盖绑定到表单的任何现有事件处理程序。