Comment puis-je empêcher le défilement indésirable des pages lorsque je clique sur des liens JavaScript ?

Empêcher le défilement de page lors des clics sur des liens JavaScript

Lorsque votre page Web contient des liens qui déclenchent des événements JavaScript mais naviguent également vers une nouvelle page, vous peut rencontrer un effet secondaire indésirable : la page défile vers le haut. Ce comportement peut interrompre le flux des utilisateurs et perturber les fonctionnalités prévues de votre site Web.

Pour éviter ce comportement de défilement, vous devez désactiver l'action par défaut associée au clic sur le lien, qui redirige vers l'URL cible. Voici deux méthodes efficaces pour y parvenir :

Option 1 : event.preventDefault()

Cette méthode vous permet d'empêcher explicitement l'action par défaut en appelant le .preventDefault () méthode de l'objet événement transmis à votre gestionnaire d'événements.

• jQuery :

  <code class="js">$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
  });</code>

• addEventListener (DOM brut) :

  <code class="js">document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
  })</code>

Option 2 : return false ;

Dans jQuery, renvoyer false à partir d'un Le gestionnaire d'événements invoquera automatiquement les méthodes .stopPropagation() et .preventDefault(). Cela fournit un autre moyen d'empêcher le comportement du lien par défaut :

<code class="js">$('#ma_link').click(function(e) {
     doSomething();
     return false;
});</code>

Si vous utilisez des événements DOM bruts (et non jQuery), renvoyer false fonctionnera également sur les navigateurs modernes, mais pour une compatibilité maximale avec les navigateurs plus anciens, il est recommandé d'appeler explicitement .preventDefault().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!