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

Question

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

在下面的代码中，我在复选框上放置了一个简单的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

您拥有的逻辑只运行一次，因此它只会处理复选框的初始 state。 如果您想在复选框更改时附加/分离事件侦听器，则必须在您的复选框上连接一个事件侦听器：

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 将是

function formSumitfunc(e) {


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

    }

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

    } 


}