使用断点时number类型input的input事件为何触发两次？

我有一个<input type=number>控件，给它绑定了input事件。正常操作时事件触发和处理都符合预期，但只有在事件处理器内部设置断点，并且通过控件的数字箭头修改值时，事件处理器会被调用两次；不使用断点时只会触发一次，符合预期。

为什么在断点模式下，事件处理器会被触发两次？

复现代码 #

<html>
<body>
    <div>若在事件处理器内设置断点，再通过数字箭头修改数值，会发现事件处理器触发两次。</div>
    <input type="number" id="numberInput">
    <div id="numberDisplay"></div>

    <script>
        numberInput.addEventListener('input', OnInput_numberInput);

        function OnInput_numberInput(event) {
            // 若在此处设置断点并通过数字箭头修改值，该处理器会触发两次；否则将按预期仅触发一次。
            numberDisplay.innerHTML = `&nbsp;${event.target.value}&nbsp;`;
        }
    </script>
</body>
</html>

这是浏览器调试模式下的特殊行为，核心在于数字箭头的交互逻辑和断点暂停的时机冲突：

• 点击数字箭头时，浏览器会先触发一次input事件，同时开始更新输入框的DOM状态（比如数值变更、光标位置调整）。
• 正常情况下，这些操作同步完成，最终只触发一次input事件。但断点会让JS执行线程暂停，此时浏览器的UI线程会趁机完成剩余的DOM更新操作——部分浏览器（如Chrome）在这个过程中，会因DOM状态的二次调整（比如光标重置）再次触发input事件。
• 直白点说：断点打断了JS与UI线程的同步节奏，把原本一次完成的操作拆成了两步，每一步都触发了input事件。

注意：这种情况仅在调试模式下出现，生产环境不会有该问题——没有断点导致的线程暂停，浏览器会一次性完成所有状态更新，只会触发一次input事件。

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