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

Posted 2023-05-09

【中文标题】e.PreventDefault（）未按预期触发，表单提交[重复]

【英文标题】：e.PreventDefault() not firing as intended, form submission [duplicate]

【发布时间】：2021-09-26 21:27:29

【问题描述】：

就像标题所说的那样简单，为什么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

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

【问题讨论】：

数据库请求是异步的。当它解决并调用e.preventDefault() 时，表单提交long 消失了。

相关：How to return the response from an asynchronous call

【参考方案1】：

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

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

正在执行 loginValidator 代码，它将事件处理程序分配给提交按钮 提交事件被触发，将您重定向到 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 函数，然后查看问题是否仍然存在