Puede establecer o recuperar un valor booleano que indica si el evento actual se cancela o no . La propiedad del evento returnValue indica si la acción predeterminada para este evento se ha impedido o no. El valor se establece como verdadero de forma predeterminada, permite que se produzca la acción predeterminada.
Si establecemos el valor predeterminado en falso, evitará la acción predeterminada.
Sintaxis:
event.returnValue = bool; var booleanValue = event.returnValue;
Valor de retorno:
si el evento no se canceló, el valor de retorno es verdadero y el valor de retorno es falso si el evento se canceló o se evitó el incumplimiento.
Ejemplo 1: este ejemplo intenta cancelar los eventos onclick y onchange.
<!DOCTYPE html>
<html>
<head>
<title>returnValue event property</title>
<style>
h1 {
color: green;
}
div {
width: 500px;
height: 200px;
overflow: auto;
border: 1px solid green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<script type="text/javascript">
function WriteInformation(message) {
var inform = document.getElementById("info");
inform.innerHTML += message + "<br />";
inform.scrollTop = inform.scrollHeight;
}
function CancelEvent(event, NameEvent) {
if ('cancelable' in event) {
if (event.cancelable) {
event.preventDefault();
WriteInformation(
"The " + NameEvent +
" event is canceled.");
} else {
WriteInformation(
"The " + NameEvent +
" event is not cancelable.");
}
} else {
event.returnValue = false;
WriteInformation(
"The " + NameEvent +
" event is probably canceled.");
}
}
</script>
<input type="checkbox"
onclick="CancelEvent (event, 'onclick');" />
Try to check this checkbox.
<br />
<br /> Select one of the one options.
<select onchange="CancelEvent (event, 'onchange');">
<option>Option 1</option>
<option>Option2</option>
</select>
<br />
<br />
<div id="info" style=""></div>
</center>
</body>
</HTML>
Producción:
Ejemplo 2: Es similar al último ejemplo, la diferencia es que no verifica el estado cancelable de un evento, solo intenta cancelar los eventos onclick y onchange.
<!DOCTYPE html>
<html>
<head>
<title>returnValue event property</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<script type="text/javascript">
function WriteInformation(message) {
var inform = document.getElementById("info");
inform.innerHTML += message + "<br />";
inform.scrollTop = inform.scrollHeight;
}
function CancelEvent(event, NameEvent) {
if ('cancelable' in event) {
if (event.cancelable) {
event.preventDefault();
WriteInformation(
"The " + NameEvent +
" event is canceled");
} else {
WriteInformation(
"The " + NameEvent +
" event is not cancelable");
}
} else {
event.returnValue = false;
WriteInformation(
"The " + eventName +
" event is maybe canceled");
}
}
</script>
In this it cancels the onclick event for the checkbox
<br /> and the onchange event for the selection list below.
<br /> The onclick event is cancelable, the onchange is not.
<br />
<br />
<input type="checkbox"
onclick="return false;" />
Try to check this checkbox.
<br />
<br /> Select one of the one options.
<select onchange="return false;">
<option>First option</option>
<option>Second option</option>
</select>
</body>
</HTML>
Producción:
Navegadores compatibles:
- Google Chrome
- ES DECIR
- Borde
- Ópera
- safari de manzana