HTML表单提交时无法触发submit事件监听器的问题求助

根据你提供的代码和排查信息，结合锚点无法跳转的异常，大概率是全局事件监听器阻止了事件的默认行为或传播，导致表单的submit事件无法触发。以下是具体排查和解决步骤：

一、优先排查全局事件拦截 #

锚点无法跳转说明页面中存在全局的click事件监听器调用了event.preventDefault()，这会同时阻止提交按钮点击时的默认表单提交行为（进而无法触发submit事件）；如果回车也无效，可能还有keydown监听器拦截了回车键的默认行为。

排查操作： #

1. 打开Chrome开发者工具，进入Elements面板，选中<body>元素。
2. 切换到右侧的Event Listeners标签，展开click和keydown事件列表：
   • 查看是否有绑定在document或body上的监听器。
   • 点击监听器右侧的文件链接，跳转到对应的代码，检查是否调用了e.preventDefault()或e.stopPropagation()。

解决方法： #

找到全局拦截事件的代码，修改逻辑：

• 不要在全局层面无差别阻止所有点击/按键的默认行为，而是针对特定元素（比如自定义导航链接）进行处理。
• 示例修改：

  // 错误写法：全局阻止所有点击默认行为
  document.addEventListener('click', e => {
    e.preventDefault();
    // ...其他逻辑
  });
  
  // 正确写法：只阻止特定元素的默认行为
  document.addEventListener('click', e => {
    if (e.target.matches('.custom-link')) {
      e.preventDefault();
      // ...处理自定义导航逻辑
    }
  });
  

二、验证表单提交的基础逻辑 #

如果全局事件没有问题，执行以下步骤验证：

1. 手动触发submit事件：在开发者工具控制台执行以下代码，看是否有Hello from the login event listener输出：

   document.getElementById('loginform').dispatchEvent(new Event('submit'));
   

   • 如果有输出：说明表单的submit监听器本身正常，问题出在点击按钮/回车的触发流程上，回到第一步继续排查全局事件拦截。
   • 如果没有输出：检查页面是否存在多个id="loginform"的元素（HTML中id必须唯一），或者监听器绑定的元素已被动态替换。

2. 确认表单验证通过：确保输入框填写了符合要求的内容（合法邮箱、密码长度≥8位），浏览器的默认表单验证失败时，不会触发submit事件。

三、其他排查点 #

• 检查脚本加载时机：确保绑定监听器的代码在DOM加载完成后执行（比如放在DOMContentLoaded事件中，或页面底部）。
• 检查login函数是否有语法错误：虽然监听器中的console.log应该优先执行，但如果login函数导入失败，可能导致后续代码报错（不过不会阻止console.log输出）。

内容的提问来源于stack exchange，提问作者Arno Nimous