Comment empêcher le défilement de la page lors d'un clic sur un lien avec JavaScript ?

Empêcher le défilement de page lors d'un clic sur un lien avec JavaScript

Lors de l'utilisation de JavaScript ou de jQuery pour améliorer le comportement d'un lien, il est courant de rencontrer un problème où cliquer un lien déclenche le défilement de la page vers le haut. Si vous souhaitez éviter ce comportement, vous disposez de quelques options.

Tout d'abord, considérez la méthode event.preventDefault(). En appelant cette méthode sur l'objet événement transmis à votre gestionnaire, vous désactivez effectivement l'action par défaut (telle que la navigation vers la cible du lien). Cela fonctionne que vous utilisiez $e.preventDefault() de jQuery ou Event.preventDefault() natif dans le DOM.

Par exemple, le code jQuery suivant empêche le défilement :

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

Un autre L'option consiste à exploiter le retour false de jQuery ; comportement. En renvoyant false à partir d'un gestionnaire d'événements, event.stopPropagation() et event.preventDefault() sont automatiquement appelés. Par conséquent, vous pouvez utiliser l'approche suivante :

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

De plus, si vous préférez les événements DOM bruts, renvoyer false sur les navigateurs modernes empêchera le comportement du lien par défaut. Cependant, il est recommandé d'appeler explicitement .preventDefault() pour une compatibilité maximale avec les anciens navigateurs, car la spécification HTML5 n'incluait pas initialement ce comportement.

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!