Event.preventdefault() 在异步函数之后

Question

为了防止bs-stepper进入下一步，我使用了这个eventhandler方法。不幸的是，这种方法似乎不适用于像 isFaceValid() 这样的异步函数...... 以下两个版本均无效。无论我是否使用异步关键字。

有没有可能实现我想要实现的目标？

目前我认为我必须坚持使用这种事件处理程序方法，我没有看到使用 bs-stepper 的其他方法 https://github.com/Johann-S/bs-stepper

stepperFormEl.addEventListener('show.bs-stepper', function(event) {
    form.classList.remove('was-validated')
    var nextStep = event.detail.indexStep
    var currentStep = nextStep

    if (currentStep > 0) {
        currentStep--
    }

    var stepperPan = stepperPanList[currentStep]

    if ((stepperPan.getAttribute('id') === 'test-form-1' && (!$('#inputUserImage').get(0).files.length)) ||
        (stepperPan.getAttribute('id') === 'test-form-1' && !anAsyncFunction())) {
        event.preventDefault();
        form.classList.add('was-validated')
    }
})


stepperFormEl.addEventListener('show.bs-stepper', async function(event) {
    form.classList.remove('was-validated')
    var nextStep = event.detail.indexStep
    var currentStep = nextStep

    if (currentStep > 0) {
        currentStep--
    }

    var stepperPan = stepperPanList[currentStep]

    if ((stepperPan.getAttribute('id') === 'test-form-1' && (!$('#inputUserImage').get(0).files.length)) ||
        (stepperPan.getAttribute('id') === 'test-form-1' && !await anAsyncFunction())) {
        event.preventDefault();
        form.classList.add('was-validated')
    }
})

Answer 1

通过调整用户工作流程，我能够使事件处理程序代码保持同步。问题已解决:)

Answer 2

您可以避免使用事件处理程序方法，bs-stepper 来自各种可用的 public 方法，例如 "next" 或 "previous"。参见：https://github.com/Johann-S/bs-stepper#next

所以你可以做类似的事情

if (!await anAsyncFunction()) {
  return;
}

bsStepper.next();

这样你就可以避免显示下一步

Event.preventdefault() 在异步函数之后

Event.preventdefault() after async function

javascript

event-listener

preventdefault

async-await