Comment annuler la navigation lorsque l'utilisateur clique sur un lien (élément <a>) ?

Question

J'essaie de charger des éléments en utilisant AJAX lorsqu'un utilisateur clique sur un lien, mais je veux que le lien aille quelque part pour que l'application fonctionne toujours lorsque javascript est désactivé. Existe-t-il un moyen de faire quelque chose avec javascript et d'annuler la navigation lorsqu'un lien est cliqué ?

Quelle est la meilleure pratique ? Cela peut-il être fait, ou dois-je remplacer le lien en utilisant du javascript ou autre ?

Answer 1

Si vous avez du HTML comme ça :

<a href="no_javascript.html" id="mylink">Do Something</a>

Vous feriez quelque chose comme ça avec jQuery :

$(document).ready(function() {
    $('#mylink').click(function() {
        doSomethingCool();
        return false; // cancel the event
    });
});

Il suffit d'annuler l'événement de clic avec Javascript pour empêcher l'action par défaut de se produire. Ainsi, lorsque quelqu'un clique sur le lien avec Javascript activé, doSomethingCool(); est appelé et l'événement de clic est annulé (donc l'élément return false; ) et empêche le navigateur d'aller à la page spécifiée. En revanche, si le Javascript est désactivé, le navigateur se rendra à la page suivante no_javascript.html directement.

Answer 2

Rien de tout cela n'a fonctionné pour moi avec le navigateur Google Chrome.

Voici ce qui a fonctionné (en utilisant jQuery) :

$(document).ready(function() {
    $('#mylink').click(function(event) {
        doSomethingCool();
        event.preventDefault(); // cancel the event
    });
});

Answer 3

Pourquoi jQuery ?

HTML :

<a href="no_javascript.html" onclick="return doSmth()">Link</a>

...et du code javascript :

function doSmth(){
  // your code here
  return false
}

Answer 4

Ce que je ferais, ce sont :

a. pour l'attribut href, javascript:void(); sera fixé

b. pour l'événement onclick, fournir une fonction pour gérer l'événement de clic et cette fonction retournera false.

eg :

<script type="text/javascript">
   function myfunction()
   {
      //do something
      return false;
   }
   </script>

   <a href="javascript:void();" onclick="myfunction()">Link</a>

Answer 5

Pour IE au moins, il suffit de mettre this.event.returnValue = false; à la fin de la méthode.

par exemple

function onClickFunction()
 {
  someMethod();
  this.event.returnValue = false;
 }

J'avais une méthode complexe où cela a fait l'affaire.