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

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 原型(prototype)调用的，因为 document.getElementsByTagName 返回 HTMLCollection 而不是 Array。

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

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

用这个:

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

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