时间戳

首页 > 解决方案 > 带有 preventDefault 的简单表单不起作用（没有任何 jquery）

javascript - 带有 preventDefault 的简单表单不起作用（没有任何 jquery）

问题描述

我有一个简单的 html 表单和 Javascript。我一直在试图阻止表单提交。但它忽略了我的代码e.preventDefault()并继续提交并刷新页面。

我遇到的大多数解决方案都包括 JQuery。没有 JQuery 就不能做到这一点吗？
为什么这不起作用？问题是什么？

<html>
  <head>
      <script>
          function onsubmit(e) {
              e.preventDefault();
              e.stopPropagation();

              console.log("submitting...");
              return false;
          }
      </script>
  </head>

  <body>
      <form method="POST" onsubmit="onsubmit">
          <input placeholder="email" style="display:block"> </input>
          <input placeholder="password" style="display:block"> </input>
          <input type="submit" value="login" style="display:block"> </input>
      </form>
  </body>
</html>

标签： javascripthtmlforms

解决方案

尽管我不知道内联事件侦听器不起作用的原因，正如@teemu 在评论中所建议的那样，但当我丢弃内联onsubmit事件侦听器并使用addEventListener.

document.addEventListener("DOMContentLoaded", (e)=>{
    document.querySelector("form").addEventListener("submit", onsubmit);
}

将其添加到 中<script>，并且有效

推荐阅读