Éléments avec HREF="#" entraînant le rechargement de la page au clic

Question

J'ai quelques a qui exécutent des fonctions via javascript et avoir un # défini comme le href Cependant, j'ai récemment modifié quelque chose qui fait qu'ils essaient de recharger la page au lieu de ne rien faire, ce qui casse leur fonctionnalité.

Qu'est-ce que je peux chercher qui pourrait causer cela ?

document.getElementById("link").onclick = function(){alert("do something javascript")};

<a id="link" href="#">Do Some JS</a>

Clicking this however reloads page and am unsure what i have done to cause this to reload the page.

Je ne peux pas reproduire dans le snippet, si je le pouvais je ne poserais pas la question, mais quelque chose fait que ces liens rechargent la page, ce qui n'est pas un comportement attendu.

Jusqu'à présent, je ne peux penser qu'à une solution rapide et sale :

$('a[href="#"]')).click(function() {
    e.preventDefault();
});

J'aimerais toutefois savoir ce qui pourrait être à l'origine de ce problème.

Le problème

Ok, je l'ai trouvé, merci pour votre aide :

window.onpopstate = function(e){
    if(e.state !== null) { 
    } else {
        location.reload();
    }
}

Cela fera l'affaire, c'est sûr.

Je pense que c'est parce que, comme les pages dépendent fortement d'ajax, il n'y avait aucun moyen de revenir à l'endroit où vous étiez.

Je me suis dit que le moyen le plus simple était de faire en sorte que les urls se mettent à jour lors des changements d'ajax, de sorte que lorsque je clique sur le bouton de retour, l'url change pour la dernière action, puis la page se recharge correctement lors du changement d'état du pop.

Ma solution rapide

Je vais changer le code en :

window.onpopstate = function(e){
    if(e.state !== null) { 
    } else {
        if(window.location.href.substr(window.location.href.length - 1) != "#") {
            location.reload();
        }
    }
}

Answer 1

Il s'agit d'un comportement normal de a si vous ne voulez pas qu'ils rechargent votre page ou qu'ils aillent en haut de votre page, vous devriez supprimer les balises href de votre a tags.
Vous pouvez également les empêcher de recharger votre page comme ceci :

<a href="#" onclick="return false;">No reload</a>

<a href="javascript:void(0)">No reload</a>

Answer 2

Dans votre fonction, vous devez utiliser e.preventDefault() o event.preventDefault() . Ainsi, par exemple :

function clickMe(e) {
   e.preventDefault();
}

Conformément au commentaire le plus récent, vous devez transmettre l'événement à la fonction pour qu'elle ressemble à ceci :

$('a[href="#"]')).click(function(e) { 
    e.preventDefault(); 
});

Notez que c'est une approche que je ne recommande pas, car elle bloquera tous les liens et pourrait causer plus de problèmes que prévu. Vous devez utiliser une classe spécifique pour cibler vos ancres.

Answer 3

Essayez javascript:void(0) à la place #

eg.

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

parce que sans voir du code on ne sait jamais ce qui cause ce problème.

Answer 4

Essayez

<a onClick="callback();"></a>

enlève juste ce href= "#"

Il ne rechargera pas ou ne rafraîchira pas le navigateur.