Vanilla JS邮箱订阅表单事件监听多次触发、无刷新退订异常问题咨询

问题核心原因 #

• 重复绑定事件监听器：你每次订阅校验通过时都会给表单新增一个click事件监听，旧的监听不会自动清除，同时表单默认的submit事件监听一直存在，导致状态切换后逻辑冲突。
• 校验分支逻辑错误：subscribeEmail中的else if (validateEmail == false)写法错误，你没有传入邮箱参数调用校验函数，直接拿函数本身和false比较，该分支永远不会执行。
• 缺少状态判断：点击按钮时没有先判断当前是订阅/退订状态，直接执行固定逻辑。

修复方案 #

1. 删除所有动态新增事件监听的代码 #

删掉subscribeEmail里新增form点击监听的代码，也删掉初始化状态判断里注释的动态绑定监听代码，所有逻辑整合到唯一的submit事件里处理，避免重复绑定。

2. 修改表单提交事件逻辑 #

修改join-us-section.js里的表单submit事件代码，加入状态判断：

document.querySelector('form').addEventListener('submit', function (e) {
  e.preventDefault()
  const isSubscribed = localStorage.getItem('isSubscribed') === 'true'
  const inputForm = document.getElementById('submit-info')
  if (isSubscribed) {
    // 已订阅状态走退订逻辑
    unsubscribe()
    localStorage.removeItem('Email')
    inputForm.value = '' // 退订后清空输入框可按需保留或删除
  } else {
    // 未订阅状态走校验订阅逻辑
    const inputValue = inputForm.value
    console.log(inputValue)
    localStorage.setItem('Email', inputValue)
    subscribeEmail(inputValue)
  }
})

3. 修正subscribeEmail的错误分支 #

修改subscribe.js里的subscribeEmail函数：

export const subscribeEmail = (email) => {
  if (validateEmail(email) === true) {
    subscribe()
  } else {
    unsubscribe()
    // 这里可以自行添加邮箱格式错误的提示逻辑
  }
}

修改完成后就可以实现无需刷新，多次切换订阅/退订状态的需求。

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