无法在提交表单（JavaScript）时删除`PreventDefault`事件监听器

Question

我在表单上有一个隐私策略复选框，并且在“提交”按钮上设置了preventDefault()，因此除非选中该复选框，否则不会提交电子邮件地址。

在下面的代码中，我有一个简单的removeEventListener方法放置在复选框上，用于选中该复选框，但该代码无法正常工作？

preventDefault()方法有效，但是如果满足privacyCheckbox.checked === true条件，则不会进行提交。

var mailFormSubmit = document.getElementById('mc-embedded-subscribe'),  // subscribe button
    privacyCheckbox = document.getElementById('privacy-checkbox')       // checkbox

// prevent default
function stopFormSubmit (e) {
    e.preventDefault()
}

if (privacyCheckbox.checked === false) {
    mailFormSubmit.addEventListener('click', stopFormSubmit, false)
}   

if (privacyCheckbox.checked === true) {
    mailFormSubmit.removeEventListener('click', stopFormSubmit, false)
}

Answer 1

您拥有的逻辑仅运行一次，因此将仅处理复选框的初始状态。如果要附加/分离事件监听器每当复选框更改时，则必须在复选框上连接事件监听器：

const mailFormSubmit = document.getElementById('mc-embedded-subscribe'),  // subscribe button
      privacyCheckbox = document.getElementById('privacy-checkbox')       // checkbox

function stopFormSubmit (e) {
    e.preventDefault()
}

function updateSubmitBehavior() {
  if (privacyCheckbox.checked) {
    mailFormSubmit.removeEventListener('click', stopFormSubmit, false)
  } else {
    mailFormSubmit.addEventListener('click', stopFormSubmit, false)
  }
}

privacyCheckbox.addEventListener('change', updateSubmitBehavior);

updateSubmitBehavior();

Answer 2

您不必像这样删除removeEventListener。让我假设您正在开枪

formSumitfunc在表单提交事件上，那么您的功能将是

function formSumitfunc(e) {


    if (privacyCheckbox.checked == false) {
        e.preventDefault();

    }

    if (privacyCheckbox.checked == true) {
        // do whatever you want to do.

    } 


}