¿Cuál es el efecto de agregar 'return false' a un detector de eventos de clic?

Muchas veces he visto enlaces como estos en páginas HTML:

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

¿Cuál es el efecto de return falseallí?

Además, generalmente no veo eso en los botones.

¿Se especifica esto en alguna parte? En alguna especificación en w3.org?

El valor de retorno de un controlador de eventos determina si el comportamiento predeterminado del navegador también debe tener lugar. En el caso de hacer clic en los enlaces, esto sería seguir el enlace, pero la diferencia es más notable en los controladores de envío de formularios, donde puede cancelar el envío de un formulario si el usuario ha cometido un error al ingresar la información.

No creo que haya una especificación W3C para esto. A todas las interfaces JavaScript antiguas como esta se les ha dado el apodo "DOM 0", y en su mayoría no están especificadas. Es posible que tenga suerte leyendo la documentación anterior de Netscape 2.

La forma moderna de lograr este efecto es llamar event.preventDefault(), y esto se especifica en la especificación DOM 2 Events .

Puedes ver la diferencia con el siguiente ejemplo:

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

Al hacer clic en "Aceptar", se devuelve verdadero y se sigue el enlace. Hacer clic en "Cancelar" devuelve falso y no sigue el enlace. Si javascript está deshabilitado, el enlace se sigue normalmente.

Aquí hay una rutina más robusta para cancelar el comportamiento predeterminado y el burbujeo de eventos en todos los navegadores:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

Un ejemplo de cómo se usaría esto en un controlador de eventos:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

QUE "devuelve falso" realmente está haciendo?

return false en realidad está haciendo tres cosas muy distintas cuando lo llamas:

1. event.preventDefault ();
2. event.stopPropagation ();
3. Detiene la ejecución de devolución de llamada y vuelve inmediatamente cuando se llama.

Consulte jquery-events-stop-misusing-return-false para obtener más información.

Por ejemplo :

Al hacer clic en este enlace, return false cancelará el comportamiento predeterminado del navegador .

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Volver a ajustar false desde un evento de JavaScript generalmente cancela el comportamiento "predeterminado"; en el caso de los enlaces, le indica al navegador que no siga el enlace.

Creo que hace que el evento estándar no suceda.

En su ejemplo, el navegador no intentará ir a #.

Devolver falso detendrá el hipervínculo que se sigue después de que se haya ejecutado JavaScript. Esto es útil para JavaScript discreto que se degrada con gracia; por ejemplo, podría tener una imagen en miniatura que usa JavaScript para abrir una ventana emergente de la imagen a tamaño completo. Cuando javascript está desactivado o la imagen se hace clic con el botón central (se abre en una nueva pestaña), esto ignora el evento onClick y simplemente abre la imagen como una imagen de tamaño completo normalmente.

Si no se especificó return false, la imagen abriría la ventana emergente y abriría la imagen normalmente. Algunas personas en lugar de usar return false usan javascript como el atributo href, pero esto significa que cuando javascript está deshabilitado, el enlace no hará nada.

El uso de return false en un evento onclick impide que el navegador procese el resto de la pila de ejecución, lo que incluye seguir el enlace en el atributo href.

En otras palabras, agregar return false detiene el funcionamiento del href. En su ejemplo, esto es exactamente lo que quiere.

En los botones, no es necesario porque onclick es todo lo que se ejecutará, no hay href para procesar e ir.

El resultado falso dice que no se debe tomar la acción predeterminada, que en el caso de un <a href>es seguir el enlace. Cuando devuelva falso al onclick, se ignorará el href.

Hack de navegador: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

Devolver falso impedirá la navegación. De lo contrario, la ubicación se convertiría en el valor de retorno de someFunc

Esto return falseevita que se navegue por la página y que se desplace una ventana hacia la parte superior o inferior.

onclick="return false"

Me sorprende que nadie mencione en onmousedownlugar de onclick. los

onclick='return false'

no detecta el comportamiento predeterminado del navegador que resulta en una selección de texto (a veces no deseada) para mousedownpero

onmousedown='return false'

hace.

En otras palabras, cuando hago clic en un botón, su texto a veces se selecciona accidentalmente cambiando el aspecto del botón, lo que puede no ser deseado. Ese es el comportamiento predeterminado que estamos tratando de evitar aquí. Sin embargo, el mousedownevento se registró antes click, por lo que si solo evita ese comportamiento dentro de su clickcontrolador, no afectará la selección no deseada que surja del mousedownevento. Entonces el texto aún se selecciona. Sin embargo, evitar el valor predeterminado paramousedown evento hará el trabajo.

Ver también event.preventDefault () vs. return false

Tengo este enlace en mi página HTML:

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

La función setBodyHtml () se define como:

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

Cuando hago clic en el enlace, el enlace desaparece y el texto que se muestra en el navegador cambia a "nuevo contenido".

Pero si elimino el "falso" de mi enlace, hacer clic en el enlace no hace nada (aparentemente). ¿Porqué es eso?

Es porque si no devuelvo falso, el comportamiento predeterminado de hacer clic en el enlace y mostrar su página de destino ocurre, no se cancela. PERO, aquí el href del hipervínculo es "", por lo que enlaza con la MISMA página actual. Por lo tanto, la página se actualiza de manera efectiva y aparentemente no sucede nada.

En segundo plano, la función setBodyHtml () todavía se ejecuta. Asigna su argumento a body.innerHTML. Pero debido a que la página se actualiza / recarga inmediatamente, el contenido del cuerpo modificado no permanece visible durante más de unos pocos milisegundos, por lo que no lo veré.

Este ejemplo muestra por qué a veces es ÚTIL usar "return false".

Quiero asignar ALGUNOS href al enlace, para que se muestre como un enlace, como texto subrayado. Pero no quiero que haga clic en el enlace para volver a cargar la página. Quiero que se cancele ese comportamiento predeterminado de navegación = y cualesquiera efectos secundarios causados ​​por llamar a mi función para que tome y permanezca vigente. Por lo tanto, debo "devolver falso".

El ejemplo anterior es algo que probaría rápidamente durante el desarrollo. Para la producción, es más probable que asigne un controlador de clic en JavaScript y llame a preventDefault () en su lugar. Pero para una prueba rápida, el "retorno falso" de arriba hace el truco.

Al usar formularios, podemos usar 'return false' para evitar el envío.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>