escribí siguiendo el componente de reacción simple
en el controlador de eventos onBlur, creo una nueva macrotarea mediante 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> ); }y entonces
1, muevo el puntero del mouse al segundo div
2, luego hago clic en el primer div
se imprime con la siguiente secuencia en la consola
en la falta de definición
establecer tiempo de espera
al hacer clic
mi pregunta es por qué setTimeout se muestra antes de onClick;
agradezco sus respuestas; por favor, ayúdame; Muchísimas gracias;
Debido a que el evento de desenfoque se activa desde el evento mousedown , mientras que el evento click está hecho tanto de mousedown como de 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> Entonces, cuando suelta el puntero del mouse, el evento de desenfoque ya se disparó y el tiempo de espera 0 también tuvo tiempo de ejecutarse, a menos que pueda hacerlo en menos de un ms en Chrome, donde tienen un tiempo de espera mínimo de 1 ms.