Mira el siguiente ejemplo. Haga clic en el botón de reinicio, obtendrá el registro 1 de la consola para que pueda confirmar que funciona.
Cuando haga clic en el campo de búsqueda, se expandirá, haciendo que los botones floten a una nueva línea (incluido el botón de reinicio). Ahora, si intenta hacer clic en el botón de reinicio mientras está en una nueva línea, la transición que cierra el campo de búsqueda se ejecutará más rápido que el clic en el botón de reinicio. No es un problema importante, pero intrigante. ¿Es este el comportamiento esperado?
document.querySelector(".reset").addEventListener("click", function(e) { console.log(1) }); .wrap { max-width: 700px; } .a { padding: 10px 50px; background: #ccc; display: inline-flex; } .filter { width: 50px; transition: all 0.1s; } .filter:focus { width: 250px; } <div class="wrap"> <input type="search" class="filter"> <div class="a">button 1</div> <div class="a">button 2 </div> <div class="a">button 3</div> <div class="a reset">reset</div> </div>Creo que el problema es que el evento de blur se activa antes de que ocurra el evento de click , para remediarlo, puede usar el evento de mousedown que se activa antes de blur :
document.querySelector(".reset").addEventListener("mousedown", function(e) { console.log(1) });onclick requiere que los eventos onmousedown y onmouseup sean simultáneos.
En su caso, están separados por el evento focusout , por lo que onclick no se activa.
https://w3c.github.io/uievents/#click
Según la configuración del entorno, el evento de clic PUEDE enviarse si se produce uno o más de los tipos de eventos mouseover, mousemove y mouseout entre la presión y la liberación del botón del dispositivo señalador.