UI事件处理程序中的setTimeout宏任务

Question

我编写了以下简单的react组件

在onBlur事件处理程序中，我通过setTimeout创建了一个新的宏任务

function App() {
  const onBlur=()=>{
    console.log('onBlur')
    setTimeout(() => {
      console.log('setTimeout')
    }, 0);
  }

  const onClick=()=>{
    console.log('onClick')
  }
  
  return (
    <div className="App">
      <div id="first" onClick={onClick}>aaa</div>
      <div id="second" contentEditable onBlur={onBlur} suppressContentEditableWarning>qq</div>
    </div>
  );
}

然后

1、我将鼠标指针移动到第二个div。

2、，然后单击第一个div。

它在控制台中按以下顺序打印出来

onBlur

setTimeout

onClick

我的问题是为什么setTimeout显示在onClick之前；

请帮助我，非常感谢你的回答；

Answer 1

因为模糊事件是从mousedown事件触发的，而click事件是由mousedown和mouseup组成的。

​

const d1 = document.querySelector("div");
const d2 = document.querySelector("div[contenteditable]");

d1.addEventListener("mousedown", ({type}) => { 
  console.log(type);
  setTimeout(() => console.log("timeout from %s", type), 0);
});
d1.addEventListener("click", ({type}) => console.log(type));
d1.addEventListener("mouseup", ({type}) => console.log(type));
d2.addEventListener("blur", ({type}) => {
  console.log(type);
  setTimeout(() => console.log("timeout from %s", type), 0);
});
d2.focus();

/* expected output:
mousedown
blur
timeout from mousedown
timeout from blur
mouseup
click
*/

<div>CLICK ME</div>
<div contenteditable>focused element</div>

​

因此，当您释放鼠标指针时，模糊事件已经被触发，0超时也有时间被执行，除非在Chrome中可以在小于1ms的时间内执行，在Chrome中，它们有1ms的最小超时时间。