Comment rendre un lien d'ancrage non cliquable ou désactivé ?

Question

J'ai un lien d'ancrage que je veux désactiver une fois que l'utilisateur a cliqué dessus. Ou bien, supprimer la balise d'ancrage autour du texte, mais conserver le texte.

<a href='' id='ThisLink'>some text</a>

Je peux le faire facilement avec un bouton en ajoutant .attr("disabled", "disabled");
J'ai réussi à ajouter la propriété "disabled", mais le lien était toujours cliquable.
Je me fiche de savoir si le texte est souligné ou non.

Un indice ?

Lorsque vous cliquez sur le mauvais musicien, la mention "Mauvais" devrait être ajoutée et il ne devrait plus être possible de cliquer dessus.
Lorsque vous cliquez et que vous avez raison, le système devrait ajouter "Awesome" et désactiver tous les autres. <a> étiquettes.

Answer 1

La méthode la plus propre serait d'ajouter une classe avec pointer-events:none lorsque vous souhaitez désactiver un clic. Elle fonctionnerait comme une étiquette normale.

.disableClick{
    pointer-events: none;
}

Answer 2

<a href='javascript:void(0);'>some text</a>

Answer 3

Utilisation événements de pointeurs Style CSS. (comme l'a suggéré Jason MacDonald)

Voir MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Il est pris en charge par la plupart des navigateurs.

L'ajout de l'attribut "disabled" à l'ancre suffira si vous disposez d'une règle CSS globale comme la suivante :

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Answer 4

Je viens de comprendre ce que vous demandiez (j'espère). Voici une solution peu glorieuse

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

Answer 5

$('a').removeAttr('href')

ou

$('a').click(function(){ return false})

Cela dépend de la situation