preventDefault() sur une balise <a>

Question

preventDefault() sur une balise <a>

Demandé el 5 de Novembre, 2008: Quand la question a-t-elle été
91330 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai du html/jquery qui fait glisser un div vers le haut et vers le bas pour le montrer/cacher, quand 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>

et mon jquery...

$('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 de se comporter 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 continue à obtenir une erreur disant que preventDefault() n'est pas une fonction.

Demandé el 5 de Novembre, 2008 par Chris J Allen

Answer 1

5 Réponses

Answer 2

204voto

Davide Gualano Points 5832

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 de jQuery :

http://docs.jquery.com/Events_(Guide)#event.preventDefault.28__.29

Répondu el 5 de Novembre, 2008 par Davide Gualano (5832 Points )

Answer 3

62voto

Musaddiq Khan Points 128

Définissez l'attribut href comme href="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>

Répondu el 7 de Mai, 2012 par Musaddiq Khan (128 Points )

Answer 4

39voto

Ryan Points 303

Je sais que c'est un vieux post, mais il est en fait suggéré de ne pas utiliser return false, car trois choses se produisent en conséquence :

event.preventDefault() ;
event.stopPropagation() ;
Arrête l'exécution de la callback et revient immédiatement lorsqu'elle est appelée.

Vous ne devriez donc vraiment utiliser que la première (dans ce type de situation) : event.preventDefault() ;

Lisez ceci : http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ pour plus de détails à ce sujet.

Répondu el 15 de Août, 2011 par Ryan (303 Points )

Answer 5

13voto

Kent Fredric Points 35592

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 empêcherait le déclenchement de la A-Href.

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

Répondu el 5 de Novembre, 2008 par Kent Fredric (35592 Points )

Answer 6

12voto

Jefrey Bulla Points 51

Voici une solution non JQuery que je viens de tester et qui 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>

Répondu el 15 de Février, 2012 par Jefrey Bulla (51 Points )

preventDefault() sur une balise <a>

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

preventDefault() sur une balise &lt;a&gt;

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by:

preventDefault() sur une balise <a>