e.PreventDefault（）未按预期触发，表单提交[重复]

Question

就像标题所说的那样简单，为什么e.PreventDefault 没有执行而所有警报都在执行？

我只希望在触发“所有详细信息匹配”警报时转发页面。 我的代码：https://jsfiddle.net/3fmru8oa/

这是我要问的部分

<script>
        function loginValidator() {
          const submitButton = document.getElementById("form");
          const username = document.getElementById('uid')
          const password = document.getElementById('pwd')

          const db = new Localbase("vChatDataBase")


          submitButton.addEventListener('submit', function (e) {

            console.log(`Inputed field uid: ${username.value}`)
            console.log(`Inputed field pwd: ${password.value}`)

            db.config.debug = false


            db.collection('users').doc({ username: username.value }).get().then(document => {
              if(document === undefined) {
                alert("No user exist's with this username!")
                return e.preventDefault()
              } else {


                  if(document['password'] !== password.value ) {
                    alert("Incorrect password!")
                    return e.preventDefault()
                  } else {
                    alert("All details matched")
                    return Cookies.set("cookieUsername", document['username'])
                  }
              }
            })
          })
        }
</script>

我尝试使用 jQuery 执行此操作，但仍然存在相同的问题。我也试过return false

这与范围界定有关吗？这是如何解决的？

Answer 1

从 loginValidator 函数中删除事件处理程序。将事件处理程序连接到提交事件后，就不需要 onclick 方法了。

在你摆弄代码时，问题是当你点击提交时发生了两件事

1. 正在执行 loginValidator 代码，它将事件处理程序分配给提交按钮
2. 提交事件被触发，将您重定向到 profilePage.html 页面（因此出现 404 错误）

因此，您首先要做的是将用于向提交事件添加事件处理程序的代码移出函数，以便从一开始就注册事件，而不是在单击按钮时注册，因为您想要每次按下提交时运行的代码。

所以脚本应该是这样的

<script>
    submitButton.addEventListener('submit', function (e) {
        const submitButton = document.getElementById("form");
        const username = document.getElementById('uid');
        const password = document.getElementById('pwd');

        const db = new Localbase("vChatDataBase");

        console.log(`Inputed field uid: ${username.value}`)
        console.log(`Inputed field pwd: ${password.value}`)

        db.config.debug = false


        db.collection('users').doc({ username: username.value }).get().then(document => {
          if(document === undefined) {
            alert("No user exist's with this username!")
            return e.preventDefault()
          } else {


              if(document['password'] !== password.value ) {
                alert("Incorrect password!")
                return e.preventDefault()
              } else {
                alert("All details matched")
                return Cookies.set("cookieUsername", document['username'])
              }
          }
        })
      })
</script>

只需删除loginValidator 函数，然后查看问题是否仍然存在