Aquí está el código:
<!DOCTYPE html> <html> <body> Input: <input type="text" name="fname" id="fname" onblur="myFunction(this)"> <p>The blur event fires when an element has lost focus.</p> <script> function myFunction(ele) { alert("element has been in blur status, that's why the function is triggered"); ele.focus(); } </script> </body> </html>MDN : el evento de desenfoque se activa cuando un elemento ha perdido el foco.
Entonces, cuando se activa myFunction , el elemento ha perdido el foco. entonces la alerta en myFunction no hará que pierda el foco nuevamente (obviamente, el elemento no puede perder nada que no tenga).
Y la alerta bloqueará la función hasta que el usuario haga clic en el botón Aceptar, ¿es correcto? Después de hacer clic en el botón Aceptar en la ventana emergente de alerta, el elemento aún no tiene el "enfoque", ¿verdad?
Luego se ele.focus() , ahora el elemento tiene el foco nuevamente.
Pero puede probarlo en jsfiddle, habrá un ciclo infinito de alert("The onblur event occurs when an object loses focus.") , lo que significa que el evento onblur debería haberse activado incluso si no hace nada .
Es realmente confuso, ¿qué causó que se activara el evento onblur por segunda vez?
Es simple, porque no dejas que el elemento se desdibuje. este elemento está en el estado de enfoque hasta que haga clic en el botón Alertas "Aceptar". Después de hacer clic en el botón "Aceptar", pierde el foco y vuelve a activar el onblur . Pasa al estado de enfoque y muestra la alerta. Otra vez.....
Simplemente elimine ele.focus() , y funcionará como desee.
Voy a tratar de describir paso a paso:
onblur llama a myFunction
myFunction ejecuta, lo que da como resultado la apertura de la ventana de alerta
Si deja ele.focus() dentro de la función, el foco se vuelve a establecer en el elemento de entrada, básicamente en el mismo evento en que aparece la ventana de alerta.
Presiona OK, y la ventana de alerta se cerrará
Pero, dado que el foco ya está de vuelta en el elemento de entrada, la ventana de alerta entra en un bucle infinito, volviendo al paso 1.
Si elimina ele.focus() de su código, no habrá 3. y 5. paso, y todo funcionará bien.
<!DOCTYPE html> <html> <body> Input: <input type="text" name="fname" id="fname" onblur="myFunction(this)"> <p>The blur event fires when an element has lost focus.</p> <script> function myFunction(ele) { alert("element has been in blur status, that's why the function is triggered"); } </script> </body> </html> EDITAR: Aquí hay un violín JS con console.log incluido, para que pueda ver que se activa cada vez que hace clic en el botón Aceptar.