Manipulação do navegador Nativo Clique antes do DOM: Carregado

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

Pergunta

Eu tenho um problema com eventos nativos de navegador cruzado versus eventos de retorno de chamada.

Eu tenho um link html "clique em mim" com um dado href="". Sobre dom:loaded Anexo uma função a este link (para fazer coisas de Ajax).

O código JavaScript é carregado no final da página para seguir as recomendações da YSLOW.

Questão:

Se você carregar esta página muito rapidamente (pressionando F5), clique no link, então

  • a alert() não é chamado
  • O link é seguido (recarregando a página)

Isso acontece quando o servidor fica lento. De fato, a página não terminou de carregar e o navegador executa o código.

Demonstração:

<!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>

Inversão de marcha:

Uma virada é adicionar onClick="return false;":

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

Funciona para atrasos, mas não para clicar rápido. E eu não gosto desse tipo de virar porque meu objetivo é remover o onclick em todos <a href="">

Cumprimentos

Foi útil?

Solução 2

Fizemos muitos testes em nossos CMs em muitos navegadores.

Classificado por velocidade:

  1. JavaScript não pode executar antes de um clique muito rápido
  2. OnClick = "Return false" funciona bem na maioria dos casos
  3. JavaScript fazendo 2.) Onload é muito lento, mas pode ser suficiente
  4. Div usando como Shield traz outros problemas e não é uma boa escolha

Outras dicas

Você pode investigar isso:

O JQuery tem uma pequena função útil que inicia o seu JavaScript assim que o modelo de objeto de documento estiver pronto ... o que acontece antes que a página termine de carregar.

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

através da

Você também pode colocar uma grande div deficiente na frente de tudo enquanto a página está carregando para proibir o clique, mas eu não recomendaria.

Não tenho certeza se acertei sua pergunta, me avise se não

Parece que você tem coisas muito bem em mãos, e tudo o que você deseja fazer é criar alguns links que fazem nada em áreas onde a degradação graciosa não é possível.

Nesses casos, sugiro um vínculo com o seguinte formato:

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

Este link deve funcionalmente não fazer absolutamente nada com o JavaScript ativado ou desativado.

Anotações importantes

  1. O número zero no vazio é absolutamente necessário. O Internet Explorer reclamará de outra forma.
  2. O uso de "JavaScript: void (0);" é fortemente desencorajado pela Microsoft porque coisas estranhas podem acontecer. Para evitar a maioria dos bugs, não envolva nada além de texto em seus links vazios (0).
  3. Antes de tomar uma decisão, considere cuidadosamente se adicionar "JavaScript: void (0);" é realmente uma solução melhor do que adicionar um OnClick que retorna falsa.

Ao remover o atributo href:

A remoção do atributo href de um link é válida xhtml. Apesar de ser XHTML válido, seu link perderá seu estilo de link automático. Chega de sublinhado, não há mais cores, não mais pairam, e não há mais mudança de cor automática se o link for visitado.

Você não pode corrigir a falta de estilos com CSS devido ao suporte irregular de: Passe o Mirse no Internet Explorer.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top