preventDefault () sur une balise <a>

133

J'ai du HTML et du jQuery qui glisse de divhaut en bas pour l'afficher ou le masquer lorsqu'un lien est cliqué:

<ul class="product-info">
  <li>
    <a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
}

Ma question est la suivante: comment puis-je utiliser preventDefault()pour empêcher le lien d'agir comme un lien et d'ajouter "#" à la fin de mon URL et de sauter en haut de la page?

Je n'arrive pas à trouver la bonne syntaxe, je reçois juste une erreur disant

preventDefault () n'est pas une fonction.

javascript jquery Chris J Allen
la source

Réponses:

194

Essayez quelque chose comme:

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

Voici la page à ce sujet dans la documentation jQuery

Davide Gualano
la source
53

Définissez l' hrefattribut commehref="javascript:;" 

<ul class="product-info">
  <li>
   <a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
  <div class="toggle">
    <p>CONTENT TO SHOW/HIDE</p>
  </div>
 </li>
</ul>
Musaddiq Khan
la source
Joli petit bijou pour les ancres - merci! Quelqu'un pourrait-il décrire pourquoi cela fonctionne?
justinpage
8
L' hrefattribut @KLVTZ de la balise d'ancrage ( a) peut ne pas être vide ... Mais nous pouvons le définir sur javascript:<code-here>, c'est légal / valide. Nous entrons ensuite pour <code-here>juste une instruction vide en ajoutant un point-virgule. De cette façon, le lien ne fait rien.
Stijn de Witt
1
Merci beaucoup! Cela m'a permis d'implémenter une fonctionnalité de bouton retour (se souvenant de l'état défini par pushState () sur les pages) dans le fil d'Ariane de CalePHP comme ceci $ this-> Html-> addCrumb ('Sessions', 'javascript: window.history.back (); ');
Patronaut
13

Sinon, vous pouvez simplement renvoyer false à partir de l'événement de clic: 

 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });

Ce qui arrêterait le déclenchement de l'A-Href.

Notez cependant, pour des raisons de convivialité, dans un monde idéal que href devrait encore aller quelque part, pour les personnes qui veulent ouvrir le lien dans un nouvel onglet;)

Kent Fredric
la source
1
ouais, je pense que je répondais à ce que je pensais être votre intention au lieu de la question :)
Kent Fredric
Pour ce que cela vaut, il y a de nombreuses années, il a été vanté que vous devriez retourner -1 pour éviter que le href ne se déclenche. Je ne pense pas que cela fonctionne dans TOUS les navigateurs, et vous devez «retourner faux» pour éviter que la page ne saute.
Randy
12

C'est une solution non-JQuery que je viens de tester et cela fonctionne. 

<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
    var links= document.getElementsByTagName("a");
    for (var i=0;i<links.length;i++){
        links[i].addEventListener("click",function(e){
        alert("NOPE!, I won't take you there haha");
        //prevent event action
        e.preventDefault();
        })
    }
}); 

</script>
</head>
<body>
<div>
<ul>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.facebook.com">Facebook</a></li>
    <p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>
Jefrey Bulla
la source
12 
<ul class="product-info">
  <li>
    <a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
      <div class="toggle">
        <p>CONTENT TO SHOW/HIDE</p>
      </div>
  </li>
</ul>

Utilisation

javascript: void (0);

HATCHA
la source
@AhmadSharif J'ai testé sur FF 40.0.3 et IE 11 aujourd'hui, il y a encore du travail.
HATCHA
1
Je pense que void (0) peut être moche / déroutant pour les utilisateurs, qui peuvent le voir lorsqu'ils survolent le lien. Vous pouvez en fait mettre n'importe quel JS valide, donc j'aime mettre un commentaire qui décrit ce qu'il fait. par exemplehref="javascript:// Send Email"
colllin
11

Une autre façon de le faire en utilisant Javascript inline onclick, IIFE, eventet preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
A-Sharabiani
la source
Salut, ou simplement<a href='#' onclick="event.preventDefault()">Click Me</a>
ankabot le
6

après plusieurs opérations, lorsque la page doit enfin aller au lien, vous pouvez faire ce qui suit:

          jQuery("a").click(function(e){
            var self = jQuery(this);
            var href = self.attr('href');
            e.preventDefault();
            // needed operations

            window.location = href;
          });
1nstinct
la source
1
Pourquoi faire preventDefault, puis effectuer vous-même l'action par défaut? Faites simplement ce que vous devez ajouter et laissez la valeur par défaut avoir lieu.
nathanvda
5

Pourquoi ne pas le faire simplement en CSS?

Supprimez l'attribut "href" dans votre balise d'ancrage

<ul class="product-info">
  <li>
    <a>YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

Dans votre css,

  a{
    cursor: pointer;
    }

la source
1
De cette façon, vous perdrez l'attribut: hover dans les mauvais navigateurs (c'est-à-dire la famille)
Strae
4

Si l'arrêt de la propagation de l'événement ne vous dérange pas, utilisez simplement 

return false;

à la fin de votre gestionnaire. Dans jQuery, cela empêche le comportement par défaut et arrête la propagation de l'événement.

Sebarmeli
la source
4

Vous pouvez utiliser return false;l'appel d'événement pour arrêter la propagation de l'événement, il agit comme une event.preventDefault();annulation. Ou vous pouvez utiliser l' javascript:void(0)attribut in href pour évaluer l'expression donnée, puis revenir undefinedà l'élément.

Renvoyer l'événement lorsqu'il est appelé:

<a href="" onclick="return false;"> ... </a>

Cas nul:

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

Pour en savoir plus, consultez: Quel est l'effet de l'ajout de void (0) pour href et de 'return false' sur l'écouteur d'événement de clic de la balise d'ancrage?

RPichioli
la source