DOM事件触发顺序问题：onMouseUp中setTimeout(0)是否晚于onClick执行

常规场景下可以确定onClick会先触发，但不存在跨所有环境的100%绝对保证。

核心逻辑 #

• 浏览器的事件循环调度规则里，setTimeout(fn, 0)注册的回调属于宏任务，只会被加入宏任务队列排队，必须等当前正在执行的宏任务完全跑完之后，才会被轮到执行，不可能插队到当前正在运行的任务中间。
• 一次完整鼠标点击的事件派发是连续同步执行的，固定顺序为mousedown → mouseup → click，这三个事件的所有处理回调，都属于同一个「响应鼠标输入」的宏任务范畴，会按顺序同步跑完。
• 你在onMouseUp回调里注册0延迟定时器的时候，当前的鼠标事件处理流程还没走完，后面还有同属当前宏任务的onClick逻辑等着执行。只有等onClick的所有逻辑都执行完毕，当前宏任务彻底结束，浏览器才会从宏任务队列里取出之前注册的定时器回调运行。

特殊场景说明：如果在onMouseUp的执行逻辑里主动打断了事件流，比如弹出alert阻塞线程、写了死循环卡住JS执行、直接把目标元素从DOM中移除、手动调用了阻止后续事件的方法，会导致click事件无法正常派发，这种场景下自然不存在执行顺序的可比性，属于人为打断事件流的异常情况。

可复现的验证代码 #

你可以直接运行下面的代码观察控制台输出，验证常规场景下的执行顺序：

<div id="target" style="width:120px; height:120px; background:#eee; line-height:120px; text-align:center; cursor:pointer;">点击测试</div>
<script>
const dom = document.getElementById('target')
dom.addEventListener('mouseup', () => {
  console.log('1. onMouseUp 事件触发')
  setTimeout(() => {
    console.log('3. setTimeout 0 回调执行')
  }, 0)
})
dom.addEventListener('click', () => {
  console.log('2. onClick 事件触发')
})
</script>

所有现代浏览器下的输出顺序固定为：

1. onMouseUp 事件触发
2. onClick 事件触发
3. setTimeout 0 回调执行

目前主流现代浏览器（Chrome、Firefox、Safari、Edge）均遵循该调度逻辑，仅部分二十年前不遵循W3C标准的远古浏览器（如IE6及更早版本）可能出现异常调度的情况，日常业务开发不需要考虑这类极端兼容场景。

内容的提问来源于stack exchange，提问作者Lucien