Últimamente he tenido problemas con la recarga de una página durante el envío del formulario. Finalmente descubrí que la página se vuelve a cargar cuando envío el formulario con EventListener, pero no se vuelve a cargar con el envío del formulario al hacer clic. El siguiente código es cómo probé eso. ¿Puede alguien explicarme por qué?
<html> <head> <title>Reload Page Test</title> <script> document.addEventListener("DOMContentLoaded", function () { document.querySelector("#asubmit").addEventListener("click", test); document.querySelector("#bsubmit").onclick = test; function test(){ const name = document.getElementById("name").value; const age = document.getElementById("num").value; document.getElementById( "result" ).innerHTML = `${name} is ${age}years old.`; return false; }; }); </script> </head> <body> <div> <form> <input type="text" id="name" /> <input type="number" id="num" /> <input type="submit" id="asubmit" value="Event Listener Submit"/> <input type="submit" id="bsubmit" value="On Click Submit"> </form>`enter code here` </div> <div id="result"></div> </body> </html>Devolver false desde una función onclick evitará el comportamiento predeterminado.
El valor de retorno de una devolución de llamada del detector de eventos no tiene sentido.
Use event.preventDefault() en su lugar.
function test(event) { // ... event.preventDefault(); }