Javascript 单击处理程序中的Promise.resolve（）

我正在尝试为一些事件处理程序制作一些装饰器：一些简单的函数，它们将处理程序a作为参数，并返回一个函数B，该函数执行一些操作，然后调用

a（…参数）

我特别想构建一个decorator，它应该在所有其他处理程序之后启动作为参数传递的处理程序。但是我注意到，如果事件是以编程方式触发的，而不是手动触发的，那么对单击的处理是不同的

这在

标记的情况下尤其明显，在

单击事件上有一个异步处理程序，该处理程序等待下一个线程完成其执行（即在某个时刻有
等待Promise.resolve（））

例如，给定以下代码


常量a=document.querySelector（'a'）
a、 addEventListener（'click'，fireLastDecorator（处理程序））
a、 addEventListener（'click'，（）=>console.log（'doing stuff…'））
设置超时（单击，10000）
函数处理程序（e）{
e、 预防默认值（）
console.log（'done'）
}
函数fireLastDecorator（f）{
返回异步函数（）{
等待承诺
f、 应用（这个，参数）
}
}
函数单击（）{
a、 单击（）
}

在10秒超时期间，我可以随时单击链接：页面不会重新加载，因为
e.preventDefault（）
语句将阻止加载链接，即使存在
wait Promise.resolve（）

但是，当setTimeout启动其
click
函数（以编程方式）时，只要程序等待
wait Promise.resolve（）
，页面就会开始重新加载自身。函数在等待后继续执行（如果持久性日志处于活动状态，则可以在控制台上看到“done”字符串），但页面仍会重新加载

我想知道为什么这种行为不同

这在输入类型提交时也很明显

编辑

使用调试器时，我注意到当手动触发单击而不是通过js触发时，脚本遵循不同的路径：当手动触发时，处理程序不会等待承诺被解析，因此第二个处理程序在第一个处理程序之后被触发（好像忽略了Promise.resolve（）。当通过js触发时，处理程序等待承诺，因此添加的第二个处理程序在第一个处理程序之前被触发。
不同之处在于，在
setTimeout
情况下，您在
async
回调中调用
preventDefault（）
，该回调中包含
wait
-ed承诺。当您等待承诺时，事件将完成，此后无法再使用
preventDefault（）
截获它。您的第一次回调是错误的。您需要将它封装在一个arrow函数中，就像您对console.log所做的那样，否则它将被立即调用，而无需等待event@Addict必须立即调用它。如您所见，
fireLastDecorator
返回一个函数，并且返回的函数是我想作为click Handler附加的值吗当然，它在等待过程中完成了事件处理，但为什么在通过
单击时会发生这种情况。click（）
仅在通过鼠标单击时才会发生？