表单提交时无法删除“PreventDefault”事件侦听器 (JavaScript)答案

【问题标题】：Can't Remove `PreventDefault` Event Listener on Form Submission (JavaScript)表单提交时无法删除“PreventDefault”事件侦听器 (JavaScript)
【发布时间】：2020-04-14 23:19:25
【问题描述】：

我在表单上有一个隐私政策复选框，并且我在来自提交按钮上设置了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)
}

【问题讨论】：

逻辑在哪里？当privacyCheckbox 发生变化时，您是否正在运行它？
@Jacob 上面的代码是我在网站的 .js 文件中的全部内容。

标签： javascript events preventdefault

【解决方案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();

【讨论】：

嗨@jacob，当未使用此答案选中复选框时，表单仍会提交。
复选框一开始是勾选还是不勾选？您可能必须调用该函数一次才能初始化状态。相应更新。
啊，是的，现在可以了，谢谢。明天我会处理代码以及它是如何工作的 - 在英国已经很晚了。

【解决方案2】：

您不需要 removeEventListener 只需这样做。让我假设你正在开火

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

function formSumitfunc(e) {


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

    }

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

    } 


}

【讨论】：