En Javascript , hay dos métodos : preventDefault() y Return false , que se usan para detener el comportamiento predeterminado del navegador, pero sus funcionalidades y usos son un poco diferentes. Este artículo muestra cómo estos dos son diferentes?
prevenirPredeterminado()
Este método detiene el evento si se puede detener, lo que significa que no se producirá la acción predeterminada que pertenece al evento. Simplemente evita el comportamiento predeterminado del navegador. Los desarrolladores usan preventDefault() en muchos casos. Por ejemplo,
- Al hacer clic en un enlace, evite que el enlace siga la URL
- Al hacer clic en una casilla de verificación, evite alternar una casilla de verificación
- Al hacer clic en el botón «Enviar», evita que envíe un formulario
Falso retorno
Devolver falso seguir tres pasos
- Primero, detiene el comportamiento predeterminado de los navegadores.
- Evita que el evento propague el DOM
- Detiene la ejecución de la devolución de llamada y regresa inmediatamente cuando se le llama.
Los desarrolladores usan el retorno falso en muchos casos diferentes. Por ejemplo,
- Dependiendo del valor booleano (verdadero o falso) Si un campo de formulario (fname) está vacío, la función envía un mensaje de alerta y devuelve falso para evitar que se envíe el formulario.
- Para evitar el burbujeo (que hace que un evento se propague de un elemento secundario a un elemento principal), los desarrolladores han comenzado a utilizar declaraciones de retorno falsas para detener dicha propagación.
Nota: este comportamiento difiere de los controladores de eventos normales (que no son jQuery), en los que, en particular, devolver falso no impide que el evento se desarrolle. Devolver falso desde un controlador de eventos DOM regular no hace absolutamente nada.
A continuación se presentan algunos ejemplos para demostrar lo anterior:
Ejemplo 1: Comportamiento sin PreventDefault( ) y Return false
<!DOCTYPE html>
<html>
<head>
<title>
without PreventDefault( ) or Return false
</title>
<script>
function GeekChild() {
alert('Link Clicked');
}
function GeekParent() {
alert('div Clicked');
}
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> PreventDefault( ) </h2>
<div onclick='GeekParent()'>
<a href='https://ide.geeksforgeeks.org'
onclick='GeekChild()'>Click here to visit GeeksforGeeks.com</a>
</div>
<br>
<br>
</body>
</html>
Producción:
- Antes de hacer clic en el enlace
- Después de hacer clic en el enlace
- Después de hacer clic nuevamente
, el enlace se abrirá como un comportamiento predeterminado del navegador.
Ejemplo 2 : con PreventDefault()
<!DOCTYPE html>
<html>
<head>
<title>
without PreventDefault( )
</title>
<script>
function GeekChild() {
event.preventDefault();
event.currentTarget.innerHTML = 'Click event prevented'
alert('Link Clicked');
}
function GeekParent() {
alert('div Clicked');
}
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> PreventDefault( ) </h2>
<div onclick='GeekParent()'>
<a href='https://ide.geeksforgeeks.org'
onclick='GeekChild()'>Click here to visit GeeksforGeeks.com</a>
</div>
<br>
<br>
</body>
</html>
Producción:
- Antes de hacer clic en el enlace
- Después de hacer clic en el enlace
- Después de hacer clic de nuevo
- PreventDefault( ) cambia el comportamiento predeterminado
Ejemplo 3: con preventDefault()
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1> Try to check this box:
<input type="checkbox" id="myCheckbox">
<p>Toggling a checkbox is the default action
of clicking on a checkbox. The preventDefault()
method prevents this from happening.</p>
<script>
document.getElementById("myCheckbox")
.addEventListener("click", function(event) {
event.preventDefault()
});
</script>
</body>
</html>
Producción:
preventDefault() deja de alternar la casilla de verificación.
Ejemplo 4: con Retorno falso dependiendo de booleano (verdadero o falso)
<!DOCTYPE html>
<html>
<head>
<title>
Return false
</title>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1><!DOCTYPE html>
<html>
<head>
<title>
Return false
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> PreventDefault( ) </h2>
<div>
<a href='https://ide.geeksforgeeks.org'>Click here to visit geeksforgeeks.com</a>
</div>
<script>
$('a').click(function(event) {
alert('Link Clicked');
$('a').text('Click event prevented using return FALSE');
$('a').contents().unwrap();
return false;
});
$('div').click(function(event) {
alert('Div clicked');
});
</script>
<br>
<br>
</body>
</html>
<h2>Form must be filled</h2>
<h5>otherwise return false stop event</h5>
<form name="myForm" action="/action_page.php"
onsubmit="return validateForm()"
method="post">
Name:
<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Producción:
- Después de hacer clic en enviar sin enviar el valor, devuelve falso, detiene el evento
Ejemplo 5: con retorno falso
<!DOCTYPE html>
<html>
<head>
<title>
Return false
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> PreventDefault( ) </h2>
<div>
<a href='https://ide.geeksforgeeks.org'>Click here to visit geeksforgeeks.com</a>
</div>
<script>
$('a').click(function(event) {
alert('Link Clicked');
$('a').text('Click event prevented using return FALSE');
$('a').contents().unwrap();
return false;
});
$('div').click(function(event) {
alert('Div clicked');
});
</script>
<br>
<br>
</body>
</html>
Producción:
- Antes de hacer clic en el enlace
- Después de hacer clic en el enlace
- Return false evita que el evento se propague a través del DOM.
Publicación traducida automáticamente
Artículo escrito por ashishsaini3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA