"javascript:void(0);" vs "return false" vs "preventDefault()"

Question

Quand je veux un lien pour ne pas faire quelque chose, mais seulement de répondre à des scripts javascript quelle est la meilleure façon d'éviter le lien de défilement vers le bord supérieur de la page ?
Je sais que plusieurs façons de le faire, ils ont tous l'air de bien marcher :

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

ou

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(){
      //...
      return false;
    });
  });
</script>

et même :

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(event){
      event.preventDefault();          
      //...
    });
  });
</script>

Avez-vous une préférence ? pourquoi ? dans quelles conditions ?

PS: bien sûr, les exemples ci-dessus supposent que vous utilisez jquery, mais il y a des équivalents de trésorerie pour mootools ou prototype.

Answer 1

Reliure:

• javascript: URLs sont une horreur à éviter en tout temps;
• inline attributs de gestionnaire d'événement ne sont pas génial non plus, mais OK pour un peu de rapide de développement et de test;
• la liaison à partir d'un script, quitter le balisage propre, est généralement considéré comme une meilleure pratique. jQuery encourage, mais il n'y a aucune raison que vous ne pouvez pas le faire dans n'importe quelle bibliothèque ou de la plaine JS.

Réponses:

• En jQuery return false signifie à la fois preventDefault et stopPropagation, de sorte que le sens est différent si vous vous souciez de parent d'éléments de réception de la notification de l'événement;
• jQuery est caché ici, mais preventDefault/stopPropagation doivent être orthographié différemment dans IE généralement (returnValue/cancelBubble).

Cependant:

• Vous avez un lien qui n'est pas un lien. Il n'a pas de lien n'importe où; c'est une action. <a> n'est pas vraiment l'idéal de balisage pour cela. Ça va aller mal si quelqu'un essaie de moyen-cliquez dessus, ou d'ajouter des signets, ou l'une de l'autre, les affordances d'un lien.
• Pour les cas où il n'a vraiment de point à quelque chose, comme quand on ouvre/ferme un autre élément sur la page, définissez le lien pour pointer vers #thatelementsid et l'utilisation discrète de script pour saisir l'IDENTIFIANT de l'élément à partir du nom du lien. Vous pouvez également renifler l' location.hash sur le document de charge pour ouvrir l'élément, de sorte que le lien devient utile dans d'autres contextes.
• Sinon, pour quelque chose qui est purement une action, il serait préférable de le marquer comme: <input type="button"> ou <button type="button">. Vous pouvez définir le style avec CSS pour ressembler à un lien au lieu d'un bouton si vous voulez.
• Cependant, il existe certains aspects de la touche de style vous ne pouvez pas vraiment se débarrasser de dans IE et Firefox. Il n'est généralement pas important, mais si vous avez vraiment besoin absolu de contrôle visuel, un compromis est d'utiliser un <span> à la place. Vous pouvez ajouter un tabindex de la propriété pour la rendre accessible via le clavier dans la plupart des navigateurs bien que ce n'est pas vraiment correctement normalisées. Vous pouvez également détecter les touches utilisées comme Espace ou Entrée pour l'activer. C'est le genre de insatisfaisant, mais encore très populaire (DONC, pour une fois, elle a fait comme ceci).
• Une autre possibilité est - <input type="image">. Cela a l'accessibilité des avantages de la touche avec le plein contrôle visuel, mais seulement pour l'image pure boutons.

Answer 2

Le seul avantage que je peux penser à l'aide d' javascript:void(0) c'est qu'il va être pris en charge, même par les plus anciens navigateurs. Cela dit, je voudrais utiliser l'un de l'autre discrète approches que vous avez mentionné:

• Pour la plupart des utilisations, event.preventDefault() et return false peuvent être utilisés de façon interchangeable.
• event.preventDefault() permettra d'éviter la page de rechargement, comme souhaité, mais permettra à l'événement click à faire des bulles à la mère. Si vous souhaitez arrêter la formation de bulles, vous pouvez l'utiliser en conjonction avec event.stopPropagation.
• return false va en outre mettre fin à l'événement de remonter à la société mère.

Je dis "de façon interchangeable" dans le premier point ci-dessus, car la plupart du temps nous ne nous soucions pas de savoir si ou non un événement bulles à la mère(s). Cependant, quand faire, nous avons besoin de quelques retouches, nous devrions examiner les points deux et trois.

Considérons l'exemple suivant:

<div>Here is some text <a href="www.google.com">Click!</a></div>​

$("a").click(function(e) {
    e.preventDefault();
});

$("div").click(function() {
    $(this).css("border", "1px solid red");
});
​

En cliquant sur l'ancrage de prévenir l'action par défaut de l'événement de déclenchement, de sorte que le navigateur ne sera pas rediriger vers www.google.com. Cependant, l'événement aura toujours de "bulle" et de provoquer la div cliquez sur l'événement à feu, qui va ajouter une bordure autour d'elle. Ajouter e.stopPropagation() ou juste return false et la div cliquez sur l'événement ne se déclenche pas. Vous pouvez jouer avec ça ici: http://jsfiddle.net/cMKsN/1/

Answer 3

J'aime utiliser des href="javascript:void(0)" dans le lien que # implique de sauter vers le haut de la page et qui peut en fait se produire si, pour une raison quelconque, votre jQuery événement ne se charge pas par exemple jQuery ne parvient pas à charger.

J'utilise aussi event.preventDefault(); qu'il ne suivra pas le lien, même si une erreur est rencontrée avant return false; par exemple:

HTML:

<a id="link" href="http://www.google.com">Test</a>

jQuery Exemple 1:

$("#link").click(
    function(){
        alert("Hi");
        invalidCode();
        return false;
    }
);

jQuery Exemple 2:

$("#link").click(
    function(event){
        event.preventDefault();
        alert("Hi");
        invalidCode();
        return false;
    }
);

Depuis invalidCode(); lèvera une erreur return false n'est jamais atteint et si jQuery Exemple 1 est utilisé, l'utilisateur sera redirigé vers Google alors que jQuery dans l'Exemple 2, il ne sera pas.

Answer 4

event.preventDefault() et return false; sont une chose - ils demander au navigateur de ne pas traiter l'action par défaut de l'événement (dans ce cas, la navigation vers le href de la balise d'ancrage qui a été cliqué). href=javascript: et de ses semblables, c'est autre chose - ils sont à l'origine de l'action par défaut à 'ne rien faire'.

C'est une question de style. Voulez-vous faire tout votre travail dans le onclick, ou voulez-vous être en mesure de mettre des actions à la fois le onclick et le href et de s'appuyer sur les capacités du navigateur pour moduler entre les deux?

Answer 5

Je pense que je l'ai vu ainsi javascript:; autour que le web se développe, il est difficile de garder une trace de trucs qui sont disponibles là-bas.. mais c'est principalement sur l'accessibilité (en plus de javascript:void(0); ) et juste une petite correction n'est pas javascript:void(0), mais javascript:void(0); ce qui signifie ne rien faire pour à peu près comme return false; même si vous ne savez pas si javascript:return false; fait la même chose..

Je l'utilise toujours et suggère d'utiliser le javascript:void(0); pour un couple de raisons.. à mon humble avis, bien sûr.

1.) Je l'utilise parce que de la même quelqu'un a mentionné ci-dessus.. href="#" n'est pas appropriée, car elle pourrait indiquer un passage vers le haut et même dans ce cas "#top " serait plus adéquat pour ce cas. Mais aussi, cela peut déclencher quelque chose d'autre dans votre code qui rend l'utilisation de # (hachages), et donc une autre raison est d'éviter les conflits avec d'autres javascript qui pourrait être à l'aide de #. Et j'ai tendance à rechercher ce lors de l'utilisation d'un plugin par exemple, et de les remplacer immédiatement. href='#' href='javascript:void(0);" ou de href='javascript:;'

2.) Si je veux ré-utiliser une fonction qui, pour un groupe spécifique d'Ancrage des balises, je peux l'appeler avec le sélecteur sur n'importe quel attribut, sans se soucier de la détection de l'événement de clic et de prévenir l'action par défaut et je le fais sans même y penser, comme une préférence.

3.) Dans la plupart des cas, si vous faites le bâtiment de lien à l'aide de javascript:void(0); essaie de faire un lien à ne pas être suivie, comme l'ancien href= rel=nofollow donc éviter l'indexation de liens qui sont des actions. Je ne suis pas si sûr de cela, simplement parce que j'ai entendu dire que les robots et les robots peuvent maintenant lire même Flash et ne seraient donc pas être surpris si ils peuvent lire les liens en javascript

4.) Se référant à partir de 2.) vous pouvez cibler sur une classe comme et oublier la prévention de l'événement click d'action par défaut en utilisant a href="javascript:void(0);" et puis viser le classe directement dans le sélecteur à la fonction jQuery.

        jQuery(function($)
        {
            //from the rel
            $('a[rel="-your-rel-id"]') ... off('click').on('click',function()

            //from the class
            $('a.-the-class') ... off('click').on('click',function()

            //from the id

            $('a#-the-id').off('click').on('click',function()
            {
            --do something with this link
        });

}); 

Je préfère sentir plus à l'aise à l'aide de la classe, vous pouvez toujours le faire...

$(#- id).hasClass(-yourclass-)

ou toute autre combinaison intéressante et affectent de nombreux liens.. donc j'ai vraiment de ne pas vous suggérons d'utiliser l'Un comme sélecteur uniquement..

Normalement, ce que je vois ici suggéré est ceci:

  jQuery(function($)
        {
            //from the rel
            $('a[rel="-your-rel-id"]').on('click',function(event)
            //do something
            //prevent the click as is passed to the function as an event
            event.preventDefault();
        });

});