Manejo del clic nativo del navegador antes de dom: cargado

StackOverflow https://stackoverflow.com/questions/1223169

Pregunta

Tengo un problema con los eventos nativos entre navegadores y los eventos de CallBack.

Tengo un enlace HTML " Click Me " con un href="" dado. En dom:loaded adjunto una función a este enlace (para hacer cosas de Ajax).

El código JavaScript se carga al final de la página para seguir la recomendación de YSlow.

Problema :

Si carga esta página muy rápido (presionando F5), haga clic en el enlace y luego

  • el alert() no se llama
  • se sigue el enlace (recargando la página)

Sucede cuando el servidor se retrasa. De hecho, la página no ha terminado de cargarse y el navegador ejecuta el código.

Demostración : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  </head>
  <body>

    <a href="#toolate" id="action">Click Me</a>

    <!-- According to YSlow Recommandation load at the bottom -->
    <script src="../js/lib/prototype.js" type="text/javascript" language="JavaScript"></script>
    <script>
      /* <![CDATA[ */
      document.observe('dom:loaded', function() { 
        $('action').observe('click', function(event){ alert("click"); Event.stop(event); });
      });
      /* ]]> */
    </script>
  </body>
</html>

Dar la vuelta :

Un cambio es agregar onClick="return false;": 

<a href="#toolate" id="action" onClick="return false;">Click Me</a>

Funciona para retrasos pero no para clics rápidos. Y no me gusta este tipo de cambio porque mi objetivo es eliminar el onclick en todos los <a href="">

Saludos cordiales

¿Fue útil?

Solución 2

Hemos realizado muchas pruebas en nuestro CMS en muchos navegadores.

Ordenado por velocidad:

  1. JavaScript no puede ejecutarse antes de un clic realmente rápido
  2. onclick = " return false " funciona bien en la mayoría de los casos
  3. JavaScript haciendo 2.) onLoad es demasiado lento pero podría ser suficiente
  4. DIV usando como escudo trae otros problemas y no es una buena opción

Otros consejos

Puedes investigar esto:

  

JQuery tiene una pequeña y práctica función que   lanza tu javascript tan pronto como   el Modelo de Objetos del Documento está listo & # 8230;   que sucede antes de que la página tenga   terminado de cargar. 

$(document).ready(function(){   //
 Your code here... 
});

a través de

También podría poner un div deshabilitado grande delante de todo mientras se carga la página para prohibir hacer clic, pero no lo recomendaría.

No estoy seguro si respondí bien a su pregunta, avíseme si no lo hice

Parece que tienes las cosas bastante bien en la mano, y todo lo que estás buscando hacer es crear algunos enlaces que no hagan nada en áreas donde la degradación elegante no es posible.

En estos casos sugiero un enlace con el siguiente formato: 

<a href="javascript:void(0);">Linktext</a>

Este enlace funcionalmente no debería hacer absolutamente nada con javascript habilitado o deshabilitado.

Notas importantes

  1. El número cero en el vacío es absolutamente necesario. Internet Explorer se quejará de lo contrario.
  2. El uso de " javascript: void (0); " Microsoft lo desaconseja porque pueden suceder cosas extrañas. Para evitar la mayoría de los errores, no envuelva nada más que texto en sus enlaces nulos (0).
  3. Antes de tomar una decisión, asegúrese de considerar cuidadosamente si agrega " javascript: void (0); " es realmente una mejor solución que agregar un onclick que devuelve falso.

Al eliminar el atributo href:

Eliminar el atributo href de un enlace es XHTML válido. A pesar de ser XHTML válido, su enlace perderá su estilo de enlace automático. No más subrayado, no más colores, no más desplazamiento, y no más cambio de color automático si se visita el enlace.

No se puede solucionar la falta de estilos con CSS debido al soporte irregular de: hover en Internet Explorer.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top