onbeforeunload evento es demasiado entusiasta en IE9


Aquí hay un ejemplo de prueba html:

<!DOCTYPE html>
<html>
  <body>
    <a href="javascript:alert('Not going anywhere!');">Go nowhere 1</a>
    <a href="javascript:void(0);" onclick="alert('Not going anywhere!');">Go nowhere 2</a>
    <a href="http://www.google.com">Go somewhere</a>
    <script type="text/javascript">
      window.onbeforeunload = function() { return "Really leave?"; };
    </script>
  </body>
</html>

Esto está disponible como una página de trabajo aquí: timjeanes.com/ie9_onbeforeunload.htm

En Firefox, Chrome y Safari, obtengo el comportamiento que quiero. Es decir, al hacer clic en cualquiera de los dos primeros enlaces se muestra un cuadro de diálogo de alerta; al hacer clic en el tercer enlace (o de lo contrario navegar) se muestra el "¿Está seguro de que desea abandonar esta página?" mensaje.

Sin embargo, en IE9, el " ¿Estás seguro de que quieres salir de esta página?"mensaje también se muestra cuando hace clic en cualquiera de los dos primeros enlaces, a pesar de que no se está realizando ninguna navegación, solo estamos ejecutando un poco de javascript.

Hay algo que estoy haciendo mal? ¿O hay una buena solución para IE?

Una opción sería usar href="#" y poner mi javascript en el onclick. No estoy interesado en eso, ya que lleva al usuario a la parte superior de la página, y mi página de la vida real es bastante alta.

No he probado en otras versiones de IE.

Author: teedyay, 2011-09-01

5 answers

Ese es un error bastante desafortunado. Parece que tendrás que evitarlo, y usar el método de enlace hash es probablemente la mejor manera. Para evitar llevar al usuario a la parte superior de la página, cancele el evento usando event.preventDefault() y event.returnValue = false.

function myClickHandler(e) {
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
    alert("Not going anywhere!");
}

Llámalo así:

<a href="#" onclick="myClickHandler(event)">Go nowhere 1</a>

Edit: Puedes cancelar el evento para todos los enlaces hash de tu página así:

var links = document.links;
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    if (link.href == "#") {
        if (link.addEventListener) {
            link.addEventListener("click", cancelEvent, false);
        }
        else if (link.attachEvent) {
            link.attachEvent("onclick", cancelEvent);
        }
    }
}
function cancelEvent(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
}

O con jQuery usando solo una línea de código:

$("a[href='#']").click(function (e) { e.preventDefault(); });
 17
Author: gilly3,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-31 21:13:54

Una solución más sencilla es usar onunload en IE y onbeforeunload en otros navegadores.

 5
Author: CpnCrunch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-25 19:15:05

#null en href para evitar saltos de página en lugar de solo # y script en onclick=""

 4
Author: Stuart Green,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-03 13:58:12

No debe enlazar un evento para hacer clic usando href="javascript:...: A continuación no es bueno.

<a href="javascript:alert('Not going anywhere!');">Go nowhere 1</a>

Si va a usar un onclick y anular el href, simplemente devuelva false en el onclick.

<a onclick="alert('Not going anywhere!');return false;">Go nowhere 2</a>
 2
Author: John Hartsock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-01 14:13:22

En realidad no es un error que el "¿Está seguro de que desea salir de esta página?"mensaje aparece cuando hace clic en los primeros enlaces; parece ser una "característica" en IE 9 - Más razones por las que no me gusta IE

 1
Author: clarkb86,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-31 21:23:55