javascript - 如何恢复表单提交的默认事件监听器

Question

我有一个订单表单，用户可以在提交表单之前更改其银行卡信息。

如果他们想使用新卡，可以单击按钮将条纹支付元素安装到表单中，然后输入新卡信息。

表单提交有一个async event.preventDefault();，以便从 strip 获取 token ，以便在提交表单之前生成 token 并将其附加到隐藏字段，以便可以将 token 与条纹 gem 一起使用，在 Controller 中向用户充电。

  changeCardButton.addEventListener('click', e => {
    e.preventDefault();
    mountCardField();
  });

  function mountCardField() {
  form.addEventListener('submit', async event => {
    event.preventDefault();
    const { token, error } = await stripe.createToken(card);
    if (error) {
    } else {
      stripeTokenHandler(token);
      form.submit();
    }
  });
}

如果用户改变主意并想要返回保存的卡信息，他们可以在提交订单之前单击后退按钮:

  cardContainerBackButton.addEventListener('click', e => {
    e.preventDefault();
    unmountCardFieldAndShowLastUsedCard();
  });

  function unmountCardFieldAndShowLastUsedCard() {
    card.unmount();
    form.removeEventListener('submit', event, false);
    changeCardContainer.style.display = 'none';
    cardInfo.style.display = 'block';
  }

但是，form.removeEventListener('submit', event); 无法恢复表单默认行为并按原样提交而不生成 strip token 。

Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element.
              Please make sure the Element you are attempting to use is still mounted.

如何从表单中删除异步事件提交监听器并恢复表单默认提交行为？

Answer 1

我认为问题出在您的 removeEventListener 调用中。第二个参数必须是您要删除的原始监听器，并且目前您正在传递似乎未定义的 event。

要修复此问题，请将监听器定义为其自己的函数，并在 add 和 remove 中使用它:

const listener = async event => {
  event.preventDefault();
  const { token, error } = await stripe.createToken(card);
  if (error) {
  } else {
    stripeTokenHandler(token);
    form.submit();
  }
}

function mountCardField() {
  form.addEventListener('submit', listener);
}

function unmountCardFieldAndShowLastUsedCard() {
  // ...
  form.removeEventListener('submit', listener);
}