原生JS邮件订阅表单点击取消订阅后无法再次订阅如何解决

问题原因 #

1. 事件重复绑定未清理：subscribeEmail函数中每次邮箱校验通过完成订阅时，都会给form元素新增一个click事件监听器用于执行取消订阅逻辑，且该监听器从未被移除。
2. 事件冲突：绑定在form上的click事件会拦截表单内所有点击的默认行为，当你取消订阅后再次点击提交按钮时，之前残留的click监听器会优先触发，调用e.preventDefault()直接阻断了表单的submit事件，导致新的订阅请求根本不会执行。
3. 事件绑定对象错误：取消订阅的触发对象应该是订阅按钮，而非整个form表单。

修复代码 #

1. 调整subscribe.js逻辑 #

import { validateEmail } from './email-validator.js'

// 存储取消订阅事件处理函数，方便后续清理
let unsubscribeHandler = null

export const subscribe = () => {
  const subscribeBtn = document.getElementById('subscribeButton')
  subscribeBtn.setAttribute('value', 'Unsubscribe')
  document.getElementById('emailForm').style.display = 'none'
  localStorage.setItem('isSubscribed', 'true')

  // 先移除旧的取消订阅监听，避免重复绑定
  if (unsubscribeHandler) {
    subscribeBtn.removeEventListener('click', unsubscribeHandler)
  }
  // 给订阅按钮绑定取消订阅逻辑，而非整个form
  unsubscribeHandler = (e) => {
    e.preventDefault()
    unsubscribe()
    localStorage.removeItem('Email')
    // 执行取消订阅后移除当前监听
    subscribeBtn.removeEventListener('click', unsubscribeHandler)
    unsubscribeHandler = null
  }
  subscribeBtn.addEventListener('click', unsubscribeHandler)
}

export const unsubscribe = () => {
  const subscribeBtn = document.getElementById('subscribeButton')
  subscribeBtn.setAttribute('value', 'Subscribe')
  document.getElementById('emailForm').style.display = 'block'
  localStorage.setItem('isSubscribed', 'false')
}

export const subscribeEmail = (email) => {
  const isValidEmail = validateEmail(email)
  if (isValidEmail) {
    subscribe()
  } else {
    unsubscribe()
  }
}

2. 其他代码无需调整 #

区域创建函数中的表单submit事件绑定逻辑是正常的，不需要额外修改。

可选优化 #

你当前的邮箱校验逻辑存在误判风险，email.includes(v)会把xxx@gmail.com.cn这类邮箱也判定为合法，可调整为校验后缀匹配：

export const validateEmail = (email) => VALID_EMAIL_ENDINGS.some(v => email.endsWith(`@${v}`))

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