如何在 Bootstrap 5 的"隐藏"事件之前运行 onclick 函数？

Question

我们有一个模式弹出窗口，其中有一个带有onclick事件的按钮。当模式被隐藏时，在以前版本的bootstrap中，onclick事件首先启动，然后hidden.bs.mode事件将启动。

在5.2中，hidden.bs.modal事件首先启动，然后处理onclick事件。

示例：

<div>
<button id="yes" type="button" onclick="SetVariableValue();" data-bs-dismiss="modal">YES</button>
</div>

javascript代码：

popup.on('hidden.bs.modal', function (e) {
//do work that depends on _memberLevelVariable.cancelled value
DoWork();
}

function SetVariableValue()
{
_memberLevelVariable.cancelled = true;
}

如果我在DoWork和SetVariableValue上都设置了断点，那么在bootstrap 3.x中，我会看到SetVariableValue首先命中，然后命中DoWork。在bootstrap 5.2中，首先命中DoWork，然后命中SetVariableValue。

这破坏了依赖_memberLevelVariable值的代码，因为在5.2中，它将在DoWork方法之后而不是之前进行处理。

是否有可以控制此操作顺序的设置？我在引导程序规范中没有看到任何控制此更改或提到此更改的信息。

const popupEl = document.getElementById('myModal');
const popup = new bootstrap.Modal(popupEl);
popup.show();
popupEl.addEventListener('hidden.bs.modal', event => {
DoWork();
console.log('hiding modal now');
});
function DoWork() {
console.log('doing work now');
}
function SetVariableValue() {
console.log('setting variable value now');
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="myModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button id="yes" class="btn" type="button" onclick="SetVariableValue();" data-bs-dismiss="modal">YES</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Answer 1

您可以使用经典的无延迟setTimeout技巧。这会将内部函数调用移动到处理队列的末尾，这似乎可以解决您的问题。

const popupEl = document.getElementById('myModal');
const popup = new bootstrap.Modal(popupEl);
popup.show();
popupEl.addEventListener('hide.bs.modal', event => {
setTimeout(DoWork);
console.log('hiding modal now');
});
function DoWork() {
console.log('doing work now');
}
function SetVariableValue() {
console.log('setting variable value now');
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="myModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button id="yes" class="btn" type="button" data-bs-dismiss="modal" onClick="SetVariableValue()">YES</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>